/* =========================================================
   Общие компоненты для обоих вариантов портфолио:
   витрина «живой сайт в окне» и демо-админка на iPhone.
   Цвета берутся из переменных --card, --line, --lime, --muted, --ink, --bg2, --ease
   ========================================================= */
/* ====== ВИТРИНА: вкладки + живой сайт в окне браузера ====== */
.showcase{display:grid;grid-template-columns:260px 1fr;gap:24px;margin-top:56px;align-items:start}
.sc-tabs{display:grid;gap:6px;position:sticky;top:110px}
.sc-tab{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 16px;border-radius:16px;border:1px solid var(--line);background:var(--card);color:var(--muted);font:600 15px Onest;cursor:pointer;transition:.2s}
.sc-tab .ic{width:20px;height:20px;color:var(--lime)}
.sc-tab:hover{color:var(--ink);border-color:#3b384b}
.sc-tab.on{background:var(--lime);border-color:var(--lime);color:#07060b}
.sc-tab.on .ic{color:#07060b}
.browser{border-radius:18px;overflow:hidden;background:var(--bg2);border:1px solid var(--line);box-shadow:0 40px 100px -40px rgba(0,0,0,.8)}
.browser__bar{height:40px;display:flex;align-items:center;gap:7px;padding:0 14px;border-bottom:1px solid var(--line)}
.browser__bar i{width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.14)}
.browser__bar span{margin-left:12px;font-size:12px;color:var(--muted);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.browser__bar a{font-size:12px;color:var(--lime);white-space:nowrap}
.browser__view{position:relative;aspect-ratio:16/10;overflow:hidden;background:#0f0e16 center/cover no-repeat}
.browser__view iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0;background:#fff}
.browser__hint{position:absolute;right:12px;bottom:12px;z-index:2;padding:8px 12px;border-radius:99px;background:rgba(12,12,15,.78);color:#fff;font-size:12px;pointer-events:none;backdrop-filter:blur(6px)}
.sc-info{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:end;margin-top:22px}
.sc-info h3{font:700 clamp(22px,2.4vw,30px) Unbounded;letter-spacing:-.03em}
.sc-info .sc-style{display:inline-block;margin:8px 0 12px;font-size:13px;color:var(--muted)}
.sc-info .sc-style b{color:var(--lime);font-weight:600}
.sc-info ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px}
.sc-info li{font-size:13px;padding:6px 12px;border-radius:999px;border:1px solid var(--line);color:#cfccd9}
.sc-info__cta{display:flex;flex-wrap:wrap;gap:10px}
.sc-info__cta .btn{padding:14px 22px;font-size:15px}
.sc-all{display:flex;justify-content:center;margin-top:40px}
@media(max-width:1000px){
  .showcase{grid-template-columns:1fr}
  .sc-tabs{position:static;display:flex;overflow-x:auto;gap:8px;padding-bottom:6px;margin:0 -16px;padding-left:16px;padding-right:16px;scrollbar-width:none}
  .sc-tabs::-webkit-scrollbar{display:none}
  .sc-tab{flex:0 0 auto;width:auto;padding:11px 16px;border-radius:999px}
  .sc-info{grid-template-columns:1fr}
}
/* на телефоне окно вытянуто вверх и показывает мобильную версию сайта */
@media(max-width:700px){
  .browser__view{aspect-ratio:auto;height:min(72vh,600px)}
  .browser__hint{font-size:11px;padding:6px 10px}
}
/* ветка «сайты в этом стиле» */
.sc-sites{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:4px}
.sc-sites__t{width:100%;font-size:13px;color:var(--muted);margin-bottom:2px}
.sc-site{padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:#cfccd9;font:600 14px Onest;cursor:pointer;transition:.2s}
.sc-site:hover{border-color:var(--lime);color:var(--ink)}
.sc-site.on{background:rgba(198,255,61,.12);border-color:var(--lime);color:var(--lime)}

/* ====== ДЕМО-АДМИНКА ====== */
.admin-demo{display:grid;grid-template-columns:auto 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-top:56px}
@media(max-width:960px){.admin-demo{grid-template-columns:1fr;justify-items:center}}
.admin-demo__site{width:100%;max-width:680px}

/* --- iPhone 17: титановая рамка, Dynamic Island, боковые кнопки --- */
.iphone{position:relative;width:312px;aspect-ratio:9/19.3;border-radius:56px;padding:11px;
  background:linear-gradient(145deg,#6b6d74 0%,#2b2c31 18%,#4a4c52 45%,#1f2024 70%,#5d5f66 100%);
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18),inset 0 0 0 5px #0b0b0d,0 50px 100px -30px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.6)}
.iphone__screen{position:relative;height:100%;border-radius:46px;overflow:hidden;background:#f2f2f7;color:#111;display:flex;flex-direction:column;font-family:-apple-system,"SF Pro Text",Onest,system-ui,sans-serif}
.iphone__btn{position:absolute;width:4px;border-radius:3px;background:linear-gradient(90deg,#3a3b40,#6c6e75)}
.iphone__btn--action{left:-3px;top:112px;height:30px}
.iphone__btn--vup{left:-3px;top:160px;height:52px}
.iphone__btn--vdown{left:-3px;top:222px;height:52px}
.iphone__btn--power{right:-3px;top:180px;height:82px}
.iphone__btn--cam{right:-3px;top:330px;height:44px;width:3px;background:linear-gradient(90deg,#6c6e75,#2e2f33)}
.ios-status{height:50px;flex:none;display:flex;align-items:center;justify-content:space-between;padding:0 26px 0 34px;position:relative;z-index:3;background:#fff}
.ios-time{font:600 15px -apple-system,"SF Pro Text",Onest,sans-serif;letter-spacing:-.01em}
.ios-island{position:absolute;left:50%;top:11px;transform:translateX(-50%);width:104px;height:31px;border-radius:20px;background:#000}
.ios-icons{display:flex;gap:5px;align-items:center;color:#111}
.ios-icons svg{fill:currentColor}
.ios-home{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);width:120px;height:5px;border-radius:3px;background:#111;z-index:3}

/* --- приложение админки --- */
.app{flex:1;display:flex;flex-direction:column;min-height:0}
.app__head{display:flex;align-items:center;gap:10px;padding:6px 16px 12px;background:#fff}
.app__avatar{width:38px;height:38px;border-radius:12px;background:#ffd400;color:#0b0b0c;display:grid;place-items:center;font:700 14px Oswald,sans-serif;flex:none}
.app__head b{display:block;font-size:15px;font-weight:700;color:#111}
.app__head div span{font-size:12px;color:#8a8a8e}
.app__live{margin-left:auto;display:flex;align-items:center;gap:5px;font-size:11px;font-weight:600;color:#1f9d55;background:#e7f7ee;padding:5px 8px;border-radius:999px;white-space:nowrap}
.app__live i{width:6px;height:6px;border-radius:50%;background:#1f9d55}
.seg{display:grid;grid-template-columns:repeat(3,1fr);gap:2px;margin:0 16px 10px;padding:2px;border-radius:10px;background:#e4e4ea;background-color:#e4e4ea}
.app .seg{margin-top:0}
.seg button{border:0;background:transparent;padding:7px 0;border-radius:8px;font:600 13px -apple-system,Onest,sans-serif;color:#3c3c43;cursor:pointer;transition:.2s}
.seg button.on{background:#fff;color:#111;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.app__body{flex:1;overflow-y:auto;padding:0 14px 12px;scrollbar-width:none}
.app__body::-webkit-scrollbar{display:none}
.pane{display:none}
.pane.on{display:block;animation:qin .35s var(--ease)}
.pane__title{font-size:12px;font-weight:600;color:#6d6d72;text-transform:uppercase;letter-spacing:.04em;margin:6px 4px 8px;display:flex;justify-content:space-between}
.pane__hint{font-size:12px;color:#8a8a8e;margin:10px 4px 0;line-height:1.4}
.svc-list{display:grid;gap:8px}
.svc{background:#fff;border-radius:14px;padding:10px 10px 10px 12px;display:grid;grid-template-columns:1fr auto;gap:6px 8px;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.04);transition:opacity .2s}
.svc.off{opacity:.45}
.svc input{border:0;background:#f2f2f7;border-radius:9px;padding:8px 10px;font:500 14px -apple-system,Onest,sans-serif;color:#111;width:100%;min-width:0}
.svc input:focus{outline:2px solid #0a84ff;outline-offset:-1px;background:#fff}
.svc__name{grid-column:1/-1}
.svc__price{display:flex;align-items:center;gap:6px}
.svc__price input{width:96px;font-weight:700;text-align:right}
.svc__price span{font-size:14px;color:#6d6d72}
.svc__tools{display:flex;gap:6px}
.svc__tools button{width:32px;height:32px;border-radius:9px;border:0;display:grid;place-items:center;cursor:pointer;background:#f2f2f7;color:#3c3c43}
.svc__tools button svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.svc__tools .del{color:#ff3b30;background:#ffecea}
.add-btn{margin-top:8px;width:100%;display:flex;align-items:center;justify-content:center;gap:6px;padding:11px;border-radius:14px;border:1.5px dashed #b9b9c0;background:transparent;color:#0a84ff;font:600 14px -apple-system,Onest,sans-serif;cursor:pointer}
.field{display:block;background:#fff;border-radius:14px;padding:9px 12px;margin-bottom:8px}
.field span{display:block;font-size:11px;color:#8a8a8e;margin-bottom:3px}
.field input{width:100%;border:0;padding:2px 0;font:500 15px -apple-system,Onest,sans-serif;color:#111;background:transparent}
.field input:focus{outline:0}
.field:focus-within{box-shadow:0 0 0 2px #0a84ff}
.switch-row{display:flex;justify-content:space-between;align-items:center;background:#fff;border-radius:14px;padding:12px;margin-bottom:8px;font-size:15px;cursor:pointer}
.switch-row input{position:absolute;opacity:0;pointer-events:none}
.switch{width:46px;height:28px;border-radius:999px;background:#e4e4ea;position:relative;transition:.25s}
.switch:after{content:"";position:absolute;left:2px;top:2px;width:24px;height:24px;border-radius:50%;background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:.25s var(--ease)}
.switch-row input:checked+.switch{background:#34c759}
.switch-row input:checked+.switch:after{transform:translateX(18px)}
.app__save{flex:none;margin:6px 14px 26px;padding:13px;border:0;border-radius:14px;background:#0a84ff;color:#fff;font:600 15px -apple-system,Onest,sans-serif;cursor:pointer;transition:background .25s}
.app__save.ok{background:#34c759}

/* --- мини-сайт в стиле шиномонтажа (Kinetic) --- */
.ks{background:#0b0b0c;color:#f2f2ee;font-family:Onest,sans-serif}
.ks__promo{background:#ffd400;color:#0b0b0c;font:600 13px Oswald,sans-serif;letter-spacing:.06em;text-transform:uppercase;text-align:center;padding:9px 14px;transition:.3s}
.ks__promo[hidden]{display:none}
.ks__nav{display:flex;justify-content:space-between;align-items:center;padding:16px 24px;border-bottom:1px solid rgba(255,255,255,.08)}
.ks__nav b{font:700 20px Oswald,sans-serif;letter-spacing:.04em}
.ks__nav b span{color:#ffd400;margin-left:6px}
.ks__nav>span{font-size:12px;color:#8d8d89}
.ks__hero{padding:26px 24px 22px;background:radial-gradient(circle at 90% 0,rgba(255,212,0,.16),transparent 55%)}
.ks__hero small,.ks__info small{font:400 11px 'JetBrains Mono',monospace;color:#8d8d89;letter-spacing:.04em}
.ks__hero h3{font:700 clamp(28px,3.4vw,44px)/1 Oswald,sans-serif;text-transform:uppercase;letter-spacing:.01em;margin:8px 0 18px}
.ks__info{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(255,255,255,.08)}
.ks__info>div{background:#141416;padding:10px 12px}
.ks__info span{display:block;font-size:13px;margin-top:3px}
.ks__prices{padding:20px 24px 26px}
.ks__h{font:700 24px Oswald,sans-serif;letter-spacing:.04em;margin-bottom:6px}
.ks__row{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.08);font-size:15px;transition:background .6s}
.ks__row b{font:600 20px Oswald,sans-serif;color:#ffd400;white-space:nowrap}
.ks__row.flash{background:rgba(255,212,0,.14)}
.ks__empty{padding:14px 0;color:#8d8d89;font-size:14px}
.ks__btn{display:inline-block;margin-top:18px;padding:12px 22px;background:#ffd400;color:#0b0b0c;font:600 15px Oswald,sans-serif;letter-spacing:.05em;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%)}
.flash-txt{animation:fl .9s}
@keyframes fl{0%{background:rgba(255,212,0,.35)}100%{background:transparent}}
@media(max-width:560px){.ks__info{grid-template-columns:1fr}.ks__nav>span{display:none}}
@media(max-width:360px){.iphone{width:290px}}
.admin-note{margin-top:18px;color:var(--muted);font-size:15px;max-width:640px}
.admin-note b{color:var(--ink)}


/* длинное название сайта не должно растягивать витрину */
.showcase>*{min-width:0}.browser__bar span{min-width:0}.sc-text h3{overflow-wrap:break-word}