/* ARKHE / VISION SYSTEM
   Enhances existing navigation, dashboard and Website Lab without changing functionality.
   Intentionally lightweight: CSS lighting, hierarchy and transform/opacity motion only. */
:root{
 --ak-electric:#73e6dd;
 --ak-ice:#e5faf5;
 --ak-champagne:#e4c49a;
 --ak-shadow:rgba(1,7,17,.82);
}
body{
 background:#060a13;
 background-image:
  radial-gradient(ellipse 54% 45% at 90% 0%,rgba(59,144,151,.115),transparent 75%),
  radial-gradient(ellipse 50% 42% at 0% 100%,rgba(69,114,157,.11),transparent 73%),
  linear-gradient(155deg,#070c17,#060b15 48%,#070d18);
}
body::after{
 content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
 background-image:linear-gradient(90deg,rgba(151,240,230,.015) 1px,transparent 1px),linear-gradient(rgba(151,240,230,.014) 1px,transparent 1px);
 background-size:68px 68px;
 mask-image:radial-gradient(ellipse at 70% 35%,#000,transparent 78%);
}
.bgfx{
 background:
  radial-gradient(ellipse 65% 52% at 73% -5%,rgba(48,155,157,.17),transparent 76%),
  radial-gradient(ellipse 64% 50% at 8% 93%,rgba(61,98,161,.11),transparent 72%),
  linear-gradient(115deg,#060b13,#09101e 48%,#060911);
}
.topbar{
 border-bottom:1px solid rgba(145,226,213,.16);
 background:linear-gradient(110deg,rgba(8,17,27,.96),rgba(10,18,29,.88));
 box-shadow:inset 0 -1px 0 rgba(255,255,255,.04),0 18px 40px -30px rgba(0,0,0,.8);
 backdrop-filter:blur(15px) saturate(1.25);
 -webkit-backdrop-filter:blur(15px) saturate(1.25);
}
.brand-mark{background:conic-gradient(from 190deg,#d3a873,#8cf0dc,#448baa,#d3a873);box-shadow:0 0 20px rgba(91,232,208,.2),inset 0 1px 0 #fff8}
.brand-name{color:#f0f8f6;letter-spacing:.33em}
.brand-sub{color:#95b9b8}
.chipsnav{gap:6px}
.chipsnav button,.tb-btn{
 transition:transform .22s,border-color .22s,background .22s,box-shadow .22s;
}
.chipsnav button:hover,.tb-btn:hover{
 border-color:rgba(118,236,224,.3);
 box-shadow:inset 0 1px 0 rgba(255,255,255,.075),0 8px 24px -16px rgba(86,234,218,.45);
}
.view{animation:akPageAppear .48s cubic-bezier(.16,.84,.24,1) both}
@keyframes akPageAppear{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.vhead{position:relative;padding-bottom:12px}
.vhead::after{
 content:"";position:absolute;bottom:0;left:0;width:min(280px,44%);height:1px;
 background:linear-gradient(90deg,rgba(129,239,213,.63),rgba(236,199,156,.37),transparent);
}
.vhead h1,.view>h1,.panel>h2,.vhead h2{
 color:#f1f8f4;letter-spacing:-.027em;
 text-shadow:0 4px 30px rgba(105,233,218,.07);
}
.panel{
 border:1px solid rgba(179,231,218,.1);
 background:
  linear-gradient(153deg,rgba(244,250,246,.085),rgba(255,255,255,.016) 37%,transparent 66%),
  rgba(12,24,35,.64);
 box-shadow:inset 0 1px 0 rgba(229,249,246,.1),0 19px 40px -29px var(--ak-shadow);
}
.panel.hl{
 border-color:rgba(129,244,221,.29);
 background:
  radial-gradient(ellipse at 100% 0%,rgba(63,205,192,.085),transparent 62%),
  linear-gradient(153deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 50%),
  rgba(9,20,31,.81);
 box-shadow:inset 0 1px 0 rgba(228,255,246,.16),0 0 0 1px rgba(106,221,210,.025),0 24px 58px -38px rgba(79,211,197,.55);
}
.btn.pri{
 background:linear-gradient(122deg,#adf3e4 0%,#61d9d0 52%,#8fc2ff 100%);
 color:#041f25;font-weight:750;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.52),0 12px 28px -16px rgba(79,223,220,.75);
 transition:transform .22s,border-color .22s,filter .22s,box-shadow .22s;
}
.btn.pri:hover{filter:brightness(1.05);box-shadow:0 18px 40px -17px rgba(95,224,215,.55)}
.btn:focus-visible,.in:focus-visible,.navbtn:focus-visible{outline:2px solid #84f1da;outline-offset:3px}
.eyebrow{color:#99e8db}
.kpi{
 background:
  radial-gradient(ellipse at 100% 0%,rgba(94,224,203,.105),transparent 58%),
  linear-gradient(145deg,rgba(255,255,255,.073),rgba(255,255,255,.012) 55%),
  rgba(10,24,35,.72);
 border-color:rgba(150,236,215,.14);
}
.kpi b{font-variant-numeric:tabular-nums;letter-spacing:-.055em}
.av-dash{
 position:relative;isolation:isolate;overflow:hidden;
 background:
  radial-gradient(ellipse 80% 62% at 75% -12%,rgba(86,184,181,.14),transparent 72%),
  radial-gradient(ellipse 64% 46% at 0% 97%,rgba(199,161,106,.06),transparent 78%),
  linear-gradient(155deg,rgba(31,39,46,.75),rgba(9,20,30,.72));
 border-color:rgba(174,236,225,.18);
 box-shadow:inset 0 1px 0 rgba(244,255,251,.2),0 44px 96px -42px #000,0 0 70px -65px #84f3d3;
}
.av-dash::before{
 content:"";position:absolute;left:10%;right:10%;top:0;height:1px;z-index:2;pointer-events:none;
 background:linear-gradient(90deg,transparent,#b5f2df 43%,#d8b48a 71%,transparent);
}
.av-dash::after{
 content:"";position:absolute;z-index:-1;right:-19%;top:-21%;width:64%;aspect-ratio:1;pointer-events:none;
 border-radius:50%;background:radial-gradient(circle,rgba(74,222,206,.115),transparent 67%);
 filter:blur(14px);
}
.av-card,.av-k{
 border:1px solid rgba(162,231,216,.155);
 background:linear-gradient(145deg,rgba(255,255,255,.075),rgba(255,255,255,.018) 48%),rgba(10,22,31,.58);
 box-shadow:inset 0 1px 0 rgba(239,255,249,.14),0 24px 55px -34px #000;
 transition:transform .28s cubic-bezier(.2,.75,.2,1),border-color .28s,box-shadow .28s;
}
@media(hover:hover) and (pointer:fine){
 .av-card:hover,.av-k:hover{transform:translateY(-3px);border-color:rgba(130,238,219,.38);box-shadow:inset 0 1px 0 rgba(239,255,249,.19),0 33px 64px -32px #000}
}
#v-lab .panel.hl,#v-lab [data-pane="design"] .panel.hl{
 border:1px solid rgba(112,231,217,.33);
 background:radial-gradient(ellipse at 85% 0%,rgba(101,228,207,.12),transparent 56%),rgba(10,25,35,.89);
}
#v-lab .recipe,.recipe{
 position:relative;overflow:hidden;border-radius:18px;
 background:linear-gradient(142deg,rgba(113,240,216,.075),rgba(236,199,157,.055) 55%,rgba(22,44,63,.5));
 border-color:rgba(144,234,213,.22);
}
.recipe::before{content:"";position:absolute;inset:0 0 auto;height:1px;background:linear-gradient(90deg,transparent,#89ebdb,transparent)}
.rc-grid div{background:linear-gradient(145deg,rgba(12,24,37,.89),rgba(25,43,53,.65));border-color:rgba(160,234,218,.16)}
.scanlog{background:linear-gradient(135deg,#050c12,#091922);border-color:rgba(138,221,208,.2);color:#a8f6db;box-shadow:inset 0 1px 0 rgba(255,255,255,.045)}
.build-frame{
 position:relative;height:min(74vh,760px);
 border:1px solid rgba(154,231,212,.5);
 border-radius:21px;overflow:hidden;
 box-shadow:0 0 0 5px rgba(106,214,200,.035),0 30px 70px -32px rgba(0,0,0,.85),0 0 60px -52px rgba(113,241,225,.7);
}
.build-frame iframe{display:block;background:#fff}
/* Responsive preview controls: genuinely resize the iframe, not its screenshot. */
#studioDesktop[aria-pressed="true"],#studioPhone[aria-pressed="true"]{
 border-color:rgba(133,239,217,.65);
 background:linear-gradient(125deg,rgba(119,241,218,.18),rgba(160,208,236,.11));
 color:#e6fff9;box-shadow:inset 0 1px 0 rgba(255,255,255,.12);
}
.build-frame.phone{
 display:flex;align-items:stretch;justify-content:center;
 padding:10px max(8px,calc((100% - 430px)/2));
 background:radial-gradient(ellipse at 50% 10%,rgba(109,215,208,.1),transparent 65%),#060c15;
}
.build-frame.phone iframe{
 width:min(390px,100%);max-width:390px;flex:none;
 border:7px solid #15232f;border-radius:27px;
 box-shadow:0 0 0 1px rgba(194,234,226,.22),0 23px 50px -24px #000;
 background:#fff;
}
#buildPanel{position:relative;background:linear-gradient(150deg,rgba(29,49,60,.8),rgba(9,22,32,.92))}
#buildPanel>.row:first-child{padding:3px 2px 10px;border-bottom:1px solid rgba(171,237,215,.1)}
#buildPanel>.row:first-child .eyebrow{color:#96e9d8}
#stages .stg{border-color:rgba(130,229,210,.19)!important}
.editbox{border:1px solid rgba(155,229,211,.24);background:linear-gradient(135deg,rgba(53,173,170,.095),rgba(23,42,57,.4))}
.dropzone{border-color:rgba(119,232,215,.48);background:linear-gradient(135deg,rgba(84,209,188,.065),rgba(18,35,47,.3));transition:background .2s,border-color .2s}
.dropzone:hover{border-color:rgba(136,240,218,.78);background:rgba(87,225,209,.09)}
@media(max-width:780px){
 .av-dash{border-radius:22px;padding:12px 10px 70px}
 .av-card,.av-k{border-radius:19px}
 .build-frame{height:min(65vh,590px);border-radius:14px}
}
@media(max-width:560px){
 body::after{opacity:.2}
 .bgfx{background:linear-gradient(125deg,#070b15,#0a1421)}
 .panel{backdrop-filter:none;-webkit-backdrop-filter:none}
 .topbar{backdrop-filter:blur(8px)}
}
@media(prefers-reduced-motion:reduce){
 .view{animation:none}
 .av-card,.av-k,.btn.pri{transition:none}
 .av-card:hover,.av-k:hover,.btn.pri:hover{transform:none}
}
@media(prefers-reduced-transparency:reduce){
 .panel,.panel.hl,.av-dash,.av-card,.av-k,#buildPanel{background:#122432}
 .topbar{background:#0b1822}
}