/* ============================================================
   APPLEX — личный кабинет
   Built like the landing: full-bleed colour BANDS, big rounded
   SHAPES, solid fills. NO borders / strokes anywhere — separation
   comes from background colour, shape and shadow only.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');

:root{
  /* cherry-blossom palette — straight from the landing */
  --burgundy:#6C0820;
  --burgundy-2:#7a0e26;
  --pink:#F2AEBC;
  --pink-2:#f7c3ce;
  --misty:#F2DCDB;
  --silver:#5A86CB;
  --lapis:#3D5D91;
  --ink:#10131c;

  --bg:#0e1019;
  --fg-1:#ffffff;
  --fg-2:rgba(255,255,255,.82);
  --fg-3:rgba(255,255,255,.56);
  --fg-light:#241019;         /* text on light bands */
  --fg-light-2:rgba(36,16,25,.66);
  --green:#5fce9b;
  --amber:#f5b942;

  /* surfaces are FILLS, not outlined boxes */
  --surf:rgba(255,255,255,.06);
  --surf-2:rgba(255,255,255,.09);
  --surf-3:rgba(255,255,255,.13);

  /* legacy aliases used by page-local styles — neutralised so any
     leftover `border:…var(--line)` produces NO visible stroke */
  --line:transparent;
  --line-2:transparent;
  --border-1:transparent;
  --border-2:transparent;
  --surface:rgba(255,255,255,.06);
  --surface-2:rgba(255,255,255,.04);

  --r-sm:12px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:34px;
  --shadow:0 22px 50px -28px rgba(6,10,22,.7);
  --shadow-lg:0 40px 80px -32px rgba(6,10,22,.75);
  --ease:cubic-bezier(.2,.7,.2,1);
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:'Archivo',system-ui,sans-serif;
  background:radial-gradient(120% 80% at 80% 0%, #20304d 0%, #141a28 45%, #0e1019 100%) fixed, var(--bg);
  color:var(--fg-1);
  min-height:100vh;
}
a{color:inherit;}
::selection{background:var(--pink);color:var(--burgundy);}

/* ---------- Shell ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(20px,4vw,44px) 80px;}

/* ============================================================
   NAV  — borderless; fills + the landing's pink active underline
   ============================================================ */
.lk-nav{display:flex;align-items:center;justify-content:space-between;gap:22px;padding:26px 4px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:#fff;font-weight:800;font-size:16px;line-height:1.05;letter-spacing:.2px;}
.brand img{width:40px;height:40px;object-fit:contain;}
.brand small{display:block;font-weight:500;font-size:10px;opacity:.66;letter-spacing:.5px;}

.menu{display:flex;align-items:center;gap:18px;font-size:13px;font-weight:600;}
.menu .sep{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.34);}
.menu a{color:rgba(255,255,255,.8);text-decoration:none;position:relative;padding:6px 2px;transition:color .2s;}
.menu a:hover{color:#fff;}
.menu a.active{color:var(--pink);}
.menu a.active::after{content:"";position:absolute;left:50%;top:-13px;transform:translateX(-50%);width:28px;height:3px;border-radius:3px;background:var(--pink);}

.actions{display:flex;align-items:center;gap:12px;}
.account{display:flex;align-items:center;gap:8px;padding:4px 15px 4px 4px;border-radius:30px;background:var(--surf-2);color:#fff;text-decoration:none;font-size:12.5px;font-weight:600;transition:background .2s;}
.account:hover{background:var(--surf-3);}
.account .ava{width:27px;height:27px;border-radius:50%;background:var(--pink);color:var(--burgundy);display:grid;place-items:center;font-weight:800;font-size:12px;flex:none;}
.account .adm{font-size:9.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;padding:3px 9px;border-radius:99px;background:rgba(242,174,188,.22);color:var(--pink);}
.logout{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:30px;background:var(--surf);color:rgba(255,255,255,.85);text-decoration:none;font-size:12.5px;font-weight:600;transition:background .2s,color .2s;}
.logout:hover{background:var(--surf-2);color:#fff;}
.logout svg{width:14px;height:14px;}
.burger{display:none;width:42px;height:42px;border-radius:13px;background:var(--surf-2);color:#fff;cursor:pointer;font-size:17px;border:none;}

/* ============================================================
   HERO HEAD — every page opens on a blue band with shapes
   (full rounded panel, decorative disc + applex, no borders)
   ============================================================ */
.head{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  padding:54px clamp(26px,4vw,52px) 58px;margin-bottom:18px;
  background:radial-gradient(125% 135% at 80% 28%, #6f9ad8 0%, var(--silver) 32%, var(--lapis) 70%, #2c4570 100%);
  box-shadow:var(--shadow);
}
.head > *{position:relative;z-index:2;}
/* misty disc + applex bleeding off the right edge */
.head::before{content:"";position:absolute;z-index:1;right:-90px;top:50%;transform:translateY(-50%);width:330px;height:330px;border-radius:50%;background:radial-gradient(120% 120% at 34% 28%, #fceff1 0%, var(--misty) 46%, #e6c4cc 100%);box-shadow:0 30px 70px -30px rgba(20,12,30,.5);opacity:.9;}
.head::after{content:"";position:absolute;z-index:1;right:-66px;top:50%;transform:translateY(-50%);width:288px;height:288px;background:url('applex-hero.png') center/contain no-repeat;filter:drop-shadow(0 22px 30px rgba(60,10,30,.4));}
.head .eyebrow{font-size:12px;font-weight:700;letter-spacing:4px;color:var(--misty);text-transform:uppercase;}
.head h1{font-weight:900;font-size:clamp(40px,6.5vw,68px);line-height:.92;letter-spacing:-2px;margin-top:12px;color:#fff;text-shadow:0 16px 40px rgba(10,16,32,.3);}
.head p{margin-top:14px;max-width:520px;font-size:15.5px;line-height:1.55;color:rgba(255,255,255,.86);font-weight:500;}
.head p b{color:#fff;}
/* simple (non-hero) eyebrow inside content */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:4px;color:var(--misty);text-transform:uppercase;}
.eyebrow2{font-size:11.5px;font-weight:700;letter-spacing:3px;color:var(--misty);text-transform:uppercase;margin-bottom:9px;}

/* ============================================================
   BUTTONS — solid fills, zero outlines
   ============================================================ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;border:none;cursor:pointer;font-family:inherit;font-weight:700;text-decoration:none;white-space:nowrap;transition:background .2s var(--ease),transform .15s,color .2s,filter .2s;}
.btn-pink{background:var(--pink);color:var(--burgundy);border-radius:30px;padding:13px 26px;font-size:14px;}
.btn-pink:hover{background:var(--pink-2);}
.btn-pink:active{transform:translateY(1px);}
.btn-shop{background:var(--pink);color:var(--burgundy);border-radius:46px;padding:7px 8px 7px 22px;font-size:14px;}
.btn-shop .knob{width:34px;height:34px;border-radius:50%;background:var(--burgundy);display:grid;place-items:center;color:var(--pink);transition:transform .25s;}
.btn-shop .knob svg{width:15px;height:15px;}
.btn-shop:hover{background:var(--pink-2);}
.btn-shop:hover .knob{transform:translateX(3px);}
/* "ghost" is now a soft FILL, not an outline */
.ghost-btn{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:600;font-size:13px;padding:12px 21px;background:var(--surf-2);border:none;border-radius:30px;cursor:pointer;font-family:inherit;transition:background .2s;white-space:nowrap;}
.ghost-btn:hover{background:var(--surf-3);}
.ghost-btn svg{width:15px;height:15px;}
.btn-danger{background:rgba(225,40,72,.2);color:#ffb4c0;border:none;border-radius:30px;padding:12px 24px;font-size:13.5px;cursor:pointer;font-family:inherit;font-weight:700;transition:background .2s;}
.btn-danger:hover{background:rgba(225,40,72,.32);}
.btn-success{background:rgba(95,206,155,.2);color:#8fe6c0;border:none;border-radius:30px;padding:12px 24px;font-size:13.5px;cursor:pointer;font-family:inherit;font-weight:700;transition:background .2s;}
.btn-success:hover{background:rgba(95,206,155,.32);}
.btn-gold{background:linear-gradient(135deg,#fde047,#f59e0b);color:#3a2106;border:none;border-radius:30px;padding:12px 22px;font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit;transition:filter .2s;}
.btn-gold:hover{filter:brightness(1.06);}
.btn-sm{padding:9px 18px;font-size:12.5px;}
.btn-xs{padding:8px 14px;font-size:12px;border-radius:24px;gap:6px;}
.btn-block{width:100%;}

/* ============================================================
   SURFACES — frosted fills, big radius, soft shadow, NO border
   ============================================================ */
.card{position:relative;background:var(--surf);border-radius:var(--r-lg);padding:28px;overflow:hidden;box-shadow:var(--shadow);backdrop-filter:blur(10px);}
.card-soft{background:var(--surf-2);}
.card-title{font-size:11px;font-weight:700;letter-spacing:2.4px;text-transform:uppercase;color:var(--fg-3);margin-bottom:16px;}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:18px;flex-wrap:wrap;}
.sec-head h2{font-weight:900;font-size:30px;letter-spacing:-1px;line-height:1;}

/* solid colour panels (use INSTEAD of borders for emphasis) */
.band-hero{background:radial-gradient(125% 150% at 80% 10%, #6f9ad8 0%, var(--silver) 34%, var(--lapis) 74%, #2c4570 100%);color:#fff;box-shadow:var(--shadow);}
.band-burgundy{background:radial-gradient(125% 160% at 16% 0%, #7a0e26 0%, var(--burgundy) 46%, #4a0717 100%);color:#fff;box-shadow:var(--shadow);}
.band-light{background:linear-gradient(165deg,#f6e7e9,#efd6d9 60%,#e7cad0);color:var(--fg-light);box-shadow:var(--shadow);}
.band-light .card-title{color:var(--burgundy);}

.grid{display:grid;gap:16px;}
.g-2{grid-template-columns:repeat(2,1fr);}
.g-3{grid-template-columns:repeat(3,1fr);}
.g-4{grid-template-columns:repeat(4,1fr);}

/* stat tile — fill + lift on hover (colour change, never a stroke) */
.stat{background:var(--surf);border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--shadow);transition:transform .25s var(--ease),background .25s var(--ease);}
.stat:hover{transform:translateY(-3px);background:var(--surf-2);}
.stat .k{font-size:10.5px;font-weight:700;letter-spacing:1.6px;text-transform:uppercase;color:var(--fg-3);margin-bottom:11px;}
.stat .v{font-size:25px;font-weight:900;letter-spacing:-.5px;}
.stat .v.green{color:var(--green);}
.stat .v.pink{color:var(--pink);}
.stat .v.amber{color:var(--amber);}

/* info tile — soft inner fill */
.info-tile{padding:15px 17px;border-radius:var(--r-md);background:var(--surf-2);}
.info-tile .k{font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--fg-3);}
.info-tile .v{margin-top:7px;font-size:15px;font-weight:700;word-break:break-word;}

/* key/value rows — separated by faint zebra fill, not lines */
.row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 15px;border-radius:10px;font-size:14px;}
.row:nth-child(odd){background:rgba(255,255,255,.035);}
.row > span:first-child{color:var(--fg-3);}

/* quick-action — fill that brightens, slides on hover */
.qa{display:flex;align-items:center;gap:13px;padding:14px 16px;border-radius:var(--r-md);background:var(--surf-2);text-decoration:none;color:var(--fg-1);transition:.2s var(--ease);}
.qa:hover{background:rgba(242,174,188,.12);transform:translateX(3px);}
.qa-ico{width:38px;height:38px;border-radius:11px;background:rgba(242,174,188,.16);display:grid;place-items:center;flex:none;}
.qa-ico svg{width:17px;height:17px;color:var(--pink);}
.qa b{display:block;font-size:14px;font-weight:700;}
.qa i{font-style:normal;font-size:12.5px;color:var(--fg-3);}
.qa .arr{margin-left:auto;color:var(--fg-3);font-size:17px;}

/* ============================================================
   FORMS — filled inputs, no border; focus = soft pink glow + fill
   ============================================================ */
.field{display:flex;flex-direction:column;gap:7px;margin-bottom:14px;}
.field label{font-size:12px;font-weight:600;color:var(--fg-2);}
.field input,.field select,.field textarea{
  height:48px;border-radius:var(--r-md);background:var(--surf-2);
  border:none;color:#fff;font-family:inherit;font-size:14px;font-weight:500;padding:0 15px;
  transition:background .2s,box-shadow .2s;
}
.field textarea{height:auto;min-height:74px;padding:12px 15px;resize:vertical;}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,255,255,.42);}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;background:var(--surf-3);box-shadow:0 0 0 3px rgba(242,174,188,.3);}
.field select{appearance:none;cursor:pointer;}
.field select option{background:#1a2236;color:#fff;}
.mono{font-family:ui-monospace,'SF Mono',monospace;}
.form-grid{display:grid;gap:14px;}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;}

/* ============================================================
   BADGES / PILLS — solid fills, no outline
   ============================================================ */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.4px;padding:6px 13px;border-radius:99px;white-space:nowrap;border:none;}
.badge.on{background:rgba(95,206,155,.2);color:#8fe6c0;}
.badge.off{background:rgba(242,174,188,.2);color:var(--pink);}
.badge.amber{background:rgba(245,185,66,.2);color:var(--amber);}
.gold-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:linear-gradient(135deg,#fde047,#f59e0b);color:#3a2106;font-size:10.5px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;}
.dot{width:8px;height:8px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1);}50%{opacity:.5;transform:scale(.74);}}
.dot.pulse{animation:pulse 2s infinite;}

/* ============================================================
   TABLES — zebra fills instead of cell borders
   ============================================================ */
.table-wrap{background:var(--surf);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow);backdrop-filter:blur(10px);}
table{width:100%;border-collapse:collapse;}
thead th{text-align:left;font-size:10.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--fg-3);padding:18px 18px 14px;background:rgba(255,255,255,.04);}
tbody td{padding:15px 18px;border:none;font-size:13.5px;color:var(--fg-1);}
tbody tr:nth-child(even){background:rgba(255,255,255,.03);}
tbody tr:hover{background:rgba(242,174,188,.08);}

/* ============================================================
   TABS — filled pills, active = solid pink, no outline
   ============================================================ */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.tab-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border:none;background:var(--surf-2);color:var(--fg-2);border-radius:30px;font-family:inherit;font-size:13px;font-weight:600;cursor:pointer;transition:.2s var(--ease);}
.tab-btn svg{width:15px;height:15px;flex:none;}
.tab-btn:hover{background:var(--surf-3);color:#fff;}
.tab-btn.active{background:var(--pink);color:var(--burgundy);}

/* ---------- Empty ---------- */
.empty{text-align:center;padding:54px 24px;color:var(--fg-3);}
.empty .ico{font-size:38px;margin-bottom:14px;}
.empty h3{color:var(--fg-1);font-size:18px;font-weight:800;margin-bottom:6px;}

/* ============================================================
   Reveal — transform-only (content always visible, never stranded)
   ============================================================ */
@media (prefers-reduced-motion: no-preference){
  .reveal{animation:rise .6s var(--ease) both;}
  @keyframes rise{from{transform:translateY(20px);}to{transform:translateY(0);}}
  .d1{animation-delay:.05s;}.d2{animation-delay:.1s;}.d3{animation-delay:.16s;}.d4{animation-delay:.22s;}
}

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .menu,.account .account-label{display:none;}
  .burger{display:grid;place-items:center;}
  .lk-nav.open .menu{display:flex;position:absolute;top:78px;left:clamp(12px,4vw,44px);right:clamp(12px,4vw,44px);flex-direction:column;align-items:stretch;gap:2px;background:#141a28;border-radius:var(--r-lg);padding:14px;z-index:50;box-shadow:var(--shadow-lg);}
  .lk-nav.open .menu a{padding:14px 16px;border-radius:14px;font-size:14px;}
  .lk-nav.open .menu a:hover{background:var(--surf-2);}
  .lk-nav.open .menu .sep{display:none;}
  .lk-nav.open .menu a.active::after{display:none;}
  .lk-nav.open .menu a.active{color:var(--pink);background:rgba(242,174,188,.1);}
  .lk-nav{position:relative;}
  .head::before,.head::after{opacity:.4;}
  .g-4{grid-template-columns:repeat(2,1fr);}
  .g-3{grid-template-columns:1fr;}
  .lk-2{grid-template-columns:1fr!important;}
  .wrap{padding-left:16px;padding-right:16px;}
  .head{padding:36px clamp(18px,5vw,40px) 40px;}
  .card{padding:22px;}
  .actions .btn-pink,.actions .logout{display:none;}
  .actions .account{margin-left:auto;}
}
@media (max-width:520px){
  .g-2,.g-4{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
  .head::before,.head::after{display:none;}
  .head{padding:30px 18px 34px;}
  .head h1{font-size:clamp(32px,9vw,48px);letter-spacing:-1px;}
  .head p{font-size:14px;}
  .wrap{padding:0 12px 60px;}
  .lk-nav{padding:18px 4px;}
  .brand img{width:34px;height:34px;}
  .brand{font-size:14px;}
  .card{padding:18px;border-radius:var(--r-md);}
  .stat{padding:16px 14px;}
  .stat .v{font-size:20px;}
  .row{padding:11px 12px;font-size:13px;flex-wrap:wrap;gap:6px;}
  .info-tile{padding:12px 14px;}
  .btn-pink{padding:12px 22px;font-size:13px;}
  .ghost-btn{padding:10px 18px;font-size:12.5px;}
  .big-dl{padding:16px;font-size:14px;}
  .grid.gap, .grid{gap:12px;}
  .field input,.field select,.field textarea{height:44px;font-size:15px;}
  #key-input{height:44px;font-size:13px;min-width:0!important;}
  .sec-head h2{font-size:24px;}
  .tabs{gap:6px;}
  .tab-btn{padding:9px 14px;font-size:12px;}
  .qa{padding:12px 14px;gap:10px;}
  .qa b{font-size:13px;}
  .qa i{font-size:11.5px;}
  .account{padding:4px 10px 4px 4px;font-size:11px;}
  .account .ava{width:24px;height:24px;font-size:11px;}
  .burger{width:38px;height:38px;font-size:16px;border-radius:11px;}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  table{min-width:500px;}
  .wrap table{display:block;overflow-x:auto;}
  .stat .k{font-size:9px;}
  .sec-head h2{font-size:20px;}
  .big-dl{padding:14px;font-size:13px;}
  [style*="grid-template-columns:2fr"]{grid-template-columns:1fr!important;}
}