/* ============================================================
   APPLE DLC — личный кабинет
   Borderless redesign in the Cactus Landing language.
   No outlines/strokes — separation via background, gradients,
   soft shadows and decorative shapes. Cherry-blossom palette.
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600;700;800;900&display=swap');

:root{
  --burgundy:#6C0820;
  --burgundy-2:#7a0e26;
  --pink:#F2AEBC;
  --pink-2:#f7c3ce;
  --misty:#F2DCDB;
  --silver:#5A86CB;
  --lapis:#3D5D91;
  --ink:#10131c;

  --bg:#0e1019;
  /* translucent glass surfaces (no borders) */
  --surface:linear-gradient(180deg, rgba(54,68,102,.42), rgba(26,33,52,.46));
  --surface-2:linear-gradient(180deg, rgba(40,52,82,.40), rgba(18,24,38,.50));
  --surface-3:rgba(255,255,255,.05);
  --surface-pink:linear-gradient(180deg, rgba(242,174,188,.16), rgba(242,174,188,.04));

  --fg-1:#f4f6fb;
  --fg-2:rgba(244,246,251,.74);
  --fg-3:rgba(244,246,251,.5);
  --green:#5fce9b;
  --amber:#f5b942;
  --red:#ff9db0;

  /* soft elevation shadow used instead of borders */
  --shadow:0 22px 48px -28px rgba(6,10,22,.85), 0 2px 6px -2px rgba(6,10,22,.5);
  --shadow-sm:0 12px 26px -20px rgba(6,10,22,.8);
  --hi:inset 0 1px 0 rgba(255,255,255,.07);

  --r-sm:11px;
  --r-md:16px;
  --r-lg:24px;
  --r-xl:32px;
  --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(130% 110% at 84% -10%, #2a3f63 0%, #1a2236 45%, #0e1019 100%) fixed, var(--bg);
  color:var(--fg-1);
  min-height:100vh;
  position:relative;
  overflow-x:hidden;
}
/* decorative ambient colour zones — the landing's blue→pink→burgundy depth */
body::before{
  content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:
    radial-gradient(50% 44% at 84% -4%, rgba(111,154,216,.50), transparent 66%),
    radial-gradient(42% 40% at 6% 20%, rgba(242,174,188,.20), transparent 70%),
    radial-gradient(40% 36% at 96% 52%, rgba(90,134,203,.20), transparent 70%),
    radial-gradient(62% 50% at 50% 108%, rgba(108,8,32,.46), transparent 72%);
}
body::after{
  content:"";position:fixed;top:-200px;right:-170px;width:560px;height:560px;z-index:-2;pointer-events:none;
  border-radius:50%;
  background:radial-gradient(120% 120% at 34% 28%, rgba(252,239,241,.12) 0%, rgba(242,220,219,.07) 44%, transparent 72%);
  filter:blur(8px);
}
a{color:inherit;}

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

/* ---------- Nav ---------- */
.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:5px 15px 5px 5px;border-radius:30px;background:rgba(255,255,255,.09);box-shadow:var(--hi);color:#fff;text-decoration:none;font-size:12.5px;font-weight:600;transition:.2s var(--ease);}
.account:hover{background:rgba(255,255,255,.16);}
.account .ava{width:26px;height:26px;border-radius:50%;background:linear-gradient(180deg,var(--pink),var(--pink-2));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,.2);color:var(--pink);}
.logout{display:inline-flex;align-items:center;gap:7px;padding:10px 18px;border-radius:30px;background:rgba(255,255,255,.07);box-shadow:var(--hi);color:rgba(255,255,255,.82);text-decoration:none;font-size:12.5px;font-weight:600;transition:.2s var(--ease);}
.logout:hover{background:rgba(255,255,255,.14);color:#fff;}
.logout svg{width:14px;height:14px;}

.burger{display:none;width:42px;height:42px;border-radius:13px;border:none;background:rgba(255,255,255,.08);box-shadow:var(--hi);color:#fff;cursor:pointer;font-size:17px;}

/* ---------- Page head ---------- */
.head{margin:14px 4px 30px;}
.eyebrow{font-size:12px;font-weight:700;letter-spacing:4px;color:var(--misty);opacity:.85;text-transform:uppercase;}
.head h1{font-weight:900;font-size:clamp(40px,7vw,72px);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:560px;font-size:15.5px;line-height:1.55;color:var(--fg-2);font-weight:500;}
.head p b{color:#fff;}

/* ---------- Buttons (no 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;transition:background .2s var(--ease), transform .15s, filter .2s, box-shadow .2s;}
.btn-shop{background:var(--pink);color:var(--burgundy);border-radius:46px;padding:7px 8px 7px 22px;font-size:14px;box-shadow:0 14px 30px -14px rgba(242,174,188,.7);}
.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);}
.btn-pink{background:var(--pink);color:var(--burgundy);border-radius:30px;padding:13px 26px;font-size:14px;box-shadow:0 14px 30px -16px rgba(242,174,188,.7);}
.btn-pink:hover{background:var(--pink-2);}
.btn-pink:active{transform:translateY(1px);}
.ghost-btn{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font-weight:600;font-size:13px;padding:12px 21px;border:none;border-radius:30px;cursor:pointer;background:rgba(255,255,255,.08);box-shadow:var(--hi);font-family:inherit;transition:.2s var(--ease);white-space:nowrap;}
.ghost-btn:hover{background:rgba(255,255,255,.16);}
.ghost-btn svg{width:15px;height:15px;}
.btn-danger{background:rgba(225,40,72,.2);color:var(--red);border:none;border-radius:30px;padding:13px 25px;font-size:13.5px;cursor:pointer;font-family:inherit;font-weight:700;transition:.2s;}
.btn-danger:hover{background:rgba(225,40,72,.34);}
.btn-success{background:rgba(95,206,155,.2);color:var(--green);border:none;border-radius:30px;padding:13px 25px;font-size:13.5px;cursor:pointer;font-family:inherit;font-weight:700;transition:.2s;}
.btn-success:hover{background:rgba(95,206,155,.34);}
.btn-gold{background:linear-gradient(135deg,#fde047,#f59e0b);color:#3a2106;border-radius:30px;padding:12px 22px;font-size:13.5px;font-weight:800;cursor:pointer;font-family:inherit;border:none;transition:.2s;box-shadow:0 14px 28px -16px rgba(245,158,11,.8);}
.btn-gold:hover{filter:brightness(1.06);}
.btn-sm{padding:9px 18px;font-size:12.5px;}
.btn-xs{padding:7px 14px;font-size:12px;border-radius:24px;gap:6px;}
.btn-block{width:100%;}

/* ---------- Cards / bands (no borders) ---------- */
.card{background:var(--surface);border-radius:var(--r-lg);padding:28px;position:relative;overflow:hidden;backdrop-filter:blur(11px);box-shadow:var(--shadow),var(--hi);}
.card-soft{background:var(--surface-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;}
.eyebrow2{font-size:11.5px;font-weight:700;letter-spacing:3px;color:var(--misty);opacity:.85;text-transform:uppercase;margin-bottom:9px;}

/* gradient banner bands (already borderless, like the landing) */
.band-hero{background:radial-gradient(130% 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(130% 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:#241019;box-shadow:var(--shadow);}

.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 */
.stat{background:var(--surface);border-radius:var(--r-lg);padding:22px 20px;box-shadow:var(--shadow-sm),var(--hi);transition:transform .25s var(--ease), box-shadow .25s var(--ease);}
.stat:hover{transform:translateY(-3px);box-shadow:0 26px 50px -26px rgba(242,174,188,.4),var(--hi);}
.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 */
.info-tile{padding:16px 18px;border-radius:var(--r-md);background:var(--surface-2);box-shadow:var(--hi);}
.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;}

/* rows — divider is a fading gradient line (a shape, not a border) */
.row{display:flex;justify-content:space-between;align-items:center;padding:14px 0;font-size:14px;position:relative;}
.row:not(:last-child)::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.13),transparent);}
.row > span:first-child{color:var(--fg-3);}

/* quick action */
.qa{display:flex;align-items:center;gap:13px;padding:15px 17px;border-radius:var(--r-md);background:rgba(255,255,255,.045);box-shadow:var(--hi);text-decoration:none;color:var(--fg-1);transition:.2s var(--ease);}
.qa:hover{background:rgba(242,174,188,.1);transform:translateX(3px);}
.qa-ico{width:40px;height:40px;border-radius:13px;background:linear-gradient(180deg,rgba(242,174,188,.22),rgba(242,174,188,.08));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, no borders) ---------- */
.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:rgba(255,255,255,.07);
  border:none;box-shadow:var(--hi);color:#fff;font-family:inherit;font-size:14px;font-weight:500;padding:0 16px;
  transition:background .2s, box-shadow .2s;
}
.field textarea{height:auto;min-height:74px;padding:12px 16px;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:rgba(255,255,255,.12);box-shadow:0 0 0 2px rgba(242,174,188,.55), 0 10px 24px -12px rgba(242,174,188,.5);}
.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 (filled, no borders) ---------- */
.badge{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.4px;padding:6px 13px;border-radius:99px;}
.badge.on{background:rgba(95,206,155,.18);color:var(--green);}
.badge.off{background:rgba(242,174,188,.18);color:var(--pink);}
.badge.amber{background:rgba(245,185,66,.16);color:var(--amber);}
.gold-pill{display:inline-flex;align-items:center;gap:6px;padding:5px 12px;border-radius:99px;background:linear-gradient(135deg,rgba(253,224,71,.22),rgba(245,158,11,.16));color:var(--amber);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 (no borders; gradient row dividers) ---------- */
.table-wrap{background:var(--surface);border-radius:var(--r-lg);overflow:hidden;backdrop-filter:blur(11px);box-shadow:var(--shadow),var(--hi);}
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,.03);}
tbody td{padding:15px 18px;font-size:13.5px;color:var(--fg-1);position:relative;}
tbody tr{position:relative;}
tbody tr::after{content:"";position:absolute;left:14px;right:14px;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.1),transparent);}
tbody tr:hover{background:rgba(255,255,255,.04);}

/* ---------- Tabs (filled, no borders) ---------- */
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px;}
.tab-btn{display:inline-flex;align-items:center;gap:8px;padding:12px 19px;border:none;background:rgba(255,255,255,.06);box-shadow:var(--hi);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:rgba(255,255,255,.13);color:#fff;}
.tab-btn.active{background:var(--pink);color:var(--burgundy);box-shadow:0 12px 26px -16px rgba(242,174,188,.8);}

/* ---------- 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;}

/* ---------- Disc motif (hero banner) ---------- */
.disc-motif{position:absolute;right:-40px;top:50%;transform:translateY(-50%);width:230px;height:230px;border-radius:50%;background:radial-gradient(120% 120% at 34% 28%, #fceff1 0%, var(--misty) 44%, #e6c4cc 100%);box-shadow:0 30px 70px -28px rgba(20,12,30,.4);pointer-events:none;}
.disc-motif.apple{background:none;box-shadow:none;}
.disc-motif img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 20px 30px rgba(60,10,30,.4));}

/* ---------- Reveal ---------- */
@media (prefers-reduced-motion: no-preference){
  .reveal{opacity:0;transform:translateY(22px);animation:rise .65s var(--ease) forwards;}
  @keyframes rise{to{opacity:1;transform:none;}}
  .d1{animation-delay:.05s;}.d2{animation-delay:.1s;}.d3{animation-delay:.16s;}.d4{animation-delay:.22s;}
}

/* ---------- Responsive ---------- */
@media (max-width:860px){
  .menu,.account .account-label{display:none;}
  .burger{display:grid;place-items:center;}
  .lk-nav.open .menu{display:flex;position:absolute;top:78px;left:clamp(20px,4vw,44px);right:clamp(20px,4vw,44px);flex-direction:column;align-items:flex-start;gap:6px;background:linear-gradient(180deg,#202a42,#161d2e);border-radius:var(--r-lg);padding:16px;z-index:50;box-shadow:var(--shadow);}
  .lk-nav.open .menu .sep{display:none;}
  .lk-nav.open .menu a.active::after{display:none;}
  .g-4{grid-template-columns:repeat(2,1fr);}
  .g-3{grid-template-columns:1fr;}
  .lk-2{grid-template-columns:1fr!important;}
}
@media (max-width:520px){
  .g-2,.g-4{grid-template-columns:1fr;}
  .form-row{grid-template-columns:1fr;}
}