@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;600;700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500;600&display=swap');

  :root{
    --bg:#F5F6FA;
    --card:#FFFFFF;
    --sky:#EAECF6;
    --ink:#161B33;
    --muted:#7B8092;
    --blue:#1C2B66;
    --blue-deep:#0F1740;
    --yellow:#E8973A;
    --yellow-deep:#C97C1F;
    --gray-band:#9AA1AC;
    --alert:#FF5A36;
    --line:#E4E6EE;
    --free-text:#C97C1F;
    --free-bg:#FBEBD8;
    --gauge-glow:rgba(232,151,58,0.35);
    --radius:16px;
  }

  /* Темна тема — "Локомотив Київ": семафорні червоний/зелений на вугільному тлі */
  .phone.dark-theme{
    --bg:#17181B;
    --card:#24262A;
    --sky:#2C2F34;
    --ink:#F3EFE6;
    --muted:#9096A0;
    --blue:#DA291C;
    --blue-deep:#8C1712;
    --yellow:#17A363;
    --yellow-deep:#0B7A3D;
    --gray-band:#5B6167;
    --alert:#FF5A36;
    --line:#3A3D42;
    --free-text:#4FCE8E;
    --free-bg:#0F3323;
    --gauge-glow:rgba(218,41,28,0.35);
  }

  *{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;}
  body{
    background:#0B0C0D;
    min-height:100vh;
    display:flex;align-items:center;justify-content:center;
    font-family:'Inter',sans-serif;
    padding:24px 12px;
  }
  :focus-visible{outline:2px solid var(--blue); outline-offset:2px;}
  @media (prefers-reduced-motion: reduce){
    *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;}
  }

  .phone{
    width:390px; max-width:100%; height:844px;
    background:var(--bg);
    border-radius:44px;
    border:8px solid #0A0A0B;
    box-shadow:0 30px 80px rgba(0,0,0,0.6), inset 0 0 0 1px rgba(255,255,255,0.05);
    overflow:hidden;
    position:relative;
    display:flex;
    flex-direction:column;
    color:var(--ink);
  }
  .statusbar{height:14px;}

  /* ---------- Header ---------- */
  .app-header{
    padding:6px 20px 12px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    position:relative;
    background:var(--bg);
    z-index:20;
  }

  .ribbon{
    height:6px;
    display:flex;
    margin-bottom:2px;
  }
  .ribbon span{flex:1; height:100%;}
  .ribbon span:nth-child(1){background:var(--yellow);}
  .ribbon span:nth-child(2){background:var(--gray-band);}
  .ribbon span:nth-child(3){background:var(--blue);}
  .brand{
    font-family:'Oswald', sans-serif;
    font-weight:600;
    font-size:15px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--ink);
  }
  .brand span{color:var(--yellow);}

  .bell-wrap{position:relative;}
  .bell-btn{
    width:38px;height:38px;
    border-radius:12px;
    border:1px solid var(--line);
    background:var(--card);
    display:flex;align-items:center;justify-content:center;
    font-size:17px;
    cursor:pointer;
    position:relative;
    color:var(--ink);
  }
  .bell-badge{
    position:absolute;
    top:-5px; right:-5px;
    min-width:18px; height:18px;
    padding:0 4px;
    border-radius:9px;
    background:var(--alert);
    color:#fff;
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    font-weight:600;
    display:flex;align-items:center;justify-content:center;
    border:2px solid var(--bg);
  }

  .notif-panel{
    position:absolute;
    top:52px; right:20px;
    width:260px;
    background:var(--card);
    border-radius:14px;
    box-shadow:0 14px 40px rgba(19,26,44,0.18);
    border:1px solid var(--line);
    padding:8px;
    display:none;
    z-index:30;
  }
  .notif-panel.open{display:block;}
  .notif-item{
    display:flex; gap:10px;
    padding:9px 8px;
    border-radius:10px;
  }
  .notif-item.unread{background:var(--sky);}
  .notif-dot{
    width:8px;height:8px;border-radius:50%;
    background:var(--blue);
    margin-top:5px;flex-shrink:0;
  }
  .notif-item:not(.unread) .notif-dot{background:var(--line);}
  .notif-text{font-size:12px; color:var(--ink); line-height:1.4;}
  .notif-when{font-size:10px; color:var(--muted); margin-top:2px;}

  /* ---------- Scroll area ---------- */
  .screen{flex:1; overflow-y:auto; padding:4px 20px 20px; display:none;}
  .screen.active{display:block;}
  .screen::-webkit-scrollbar{display:none;}

  /* ---------- Gauge (signature: rising spark) ---------- */
  .gauge-card{
    background:linear-gradient(135deg, var(--blue), var(--blue-deep));
    border-radius:var(--radius);
    padding:18px 18px 16px;
    margin-bottom:16px;
    color:#fff;
    position:relative;
    overflow:hidden;
  }
  .gauge-card::after{
    content:"";
    position:absolute;
    width:140px;height:140px;
    background:radial-gradient(circle, var(--gauge-glow), transparent 70%);
    top:-50px; right:-40px;
  }
  .gauge-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:10px;position:relative;}
  .gauge-label{
    font-family:'Oswald', sans-serif;
    font-size:12px; letter-spacing:2px; text-transform:uppercase;
    color:rgba(255,255,255,0.75);
  }
  .gauge-count{
    font-family:'IBM Plex Mono', monospace;
    font-size:22px; font-weight:600;
    color:var(--yellow);
  }
  .gauge-count small{font-size:11px; color:rgba(255,255,255,0.6); font-weight:500;}
  .gauge-track{
    height:10px; border-radius:6px;
    background:rgba(255,255,255,0.18);
    display:flex; gap:3px; padding:2px;
    position:relative;
  }
  .gauge-seg{flex:1; border-radius:3px; background:rgba(255,255,255,0.15);}
  .gauge-seg.hot{background:var(--yellow);}
  .gauge-seg.missed{background:#FF5A36;}
  .gauge-foot{display:flex;justify-content:space-between;margin-top:10px;font-size:11px;color:rgba(255,255,255,0.75); position:relative;}
  .gauge-foot b{color:#fff; font-weight:600;}
  .gauge-foot.warning{color:#FFCBBA; font-weight:500;}
  .gauge-count.broken{color:#FF8A65;}
  .gauge-claim-btn{
    width:100%; margin-top:10px; padding:12px;
    border-radius:11px; border:none;
    background:var(--yellow); color:var(--blue-deep);
    font-family:'Oswald', sans-serif; font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase;
    cursor:pointer; position:relative;
  }

  /* ---------- Streak verification stepper ---------- */
  .stepper-card{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px 14px 12px;
    margin-bottom:16px;
  }
  .stepper-title{
    font-family:'Oswald', sans-serif;
    font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--muted); margin-bottom:12px;
  }
  .stepper-row{display:flex; align-items:flex-start;}
  .step{display:flex; flex-direction:column; align-items:center; gap:6px; width:78px; text-align:center;}
  .step span{font-size:9.5px; color:var(--muted); line-height:1.25;}
  .step.done span{color:var(--ink);}
  .step-dot{
    width:24px;height:24px;border-radius:50%;
    background:var(--sky); color:var(--muted);
    display:flex;align-items:center;justify-content:center;
    font-size:11px;
  }
  .step.done .step-dot{background:var(--blue); color:#fff;}
  .step.pending .step-dot{background:var(--yellow); color:#fff;}
  .step.failed .step-dot{background:var(--alert); color:#fff;}
  .step.failed span{color:var(--alert);}
  .step-line{flex:1; height:2px; background:var(--line); margin-top:11px;}
  .step-line.done{background:var(--blue);}

  /* ---------- Schedule diary (date scroller) ---------- */
  .date-scroll{display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; margin-bottom:10px;}
  .date-chip{
    flex-shrink:0; font-family:'IBM Plex Mono', monospace; font-size:12px;
    padding:8px 14px; border-radius:20px; border:1px solid var(--line);
    background:var(--card); color:var(--muted); cursor:pointer; white-space:nowrap;
  }
  .date-chip.active{background:var(--blue); border-color:var(--blue); color:#fff;}

  /* ---------- Rooms / accommodation ---------- */
  .room-group-title{
    font-family:'Oswald', sans-serif; font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--blue); margin:14px 0 2px; padding-top:8px; border-top:1px solid var(--line);
  }
  .room-group-title:first-child{margin-top:2px; padding-top:0; border-top:none;}
  .room-block{padding:10px 2px; border-top:1px solid var(--line);}
  .room-group-title + .room-block{border-top:none;}
  .room-number{
    font-family:'Oswald', sans-serif; font-size:12.5px; font-weight:600; color:var(--ink);
    margin-bottom:4px; display:flex; align-items:center; gap:6px; justify-content:space-between;
  }
  .room-cap{font-family:'IBM Plex Mono', monospace; font-size:10.5px; color:var(--muted); font-weight:500;}
  .room-free{font-size:10px; color:var(--free-text); background:var(--free-bg); padding:2px 8px; border-radius:10px; font-weight:600;}
  .room-resident{font-size:12.5px; color:var(--muted); padding-left:2px; line-height:1.7;}

  /* ---------- Hotel navigation (video guides) ---------- */
  .nav-row{
    display:flex; align-items:center; gap:12px;
    padding:10px 2px; border-top:1px solid var(--line); cursor:pointer;
    background:none; border-left:none; border-right:none; border-bottom:none; width:100%; text-align:left;
  }
  .nav-row:first-child{border-top:none;}
  .nav-thumb{
    width:52px; height:38px; border-radius:8px; flex-shrink:0;
    background:var(--sky); border:1px dashed var(--gray-band);
    display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted);
  }
  .nav-info{flex:1;}
  .nav-title{font-size:12.5px; color:var(--ink); font-weight:500;}
  .nav-sub{font-size:10.5px; color:var(--muted); margin-top:1px;}
  .nav-play{font-size:13px; color:var(--blue);}
  .video-player{
    width:100%; border-radius:14px; background:#000;
    display:block; max-height:70vh; object-fit:contain;
  }

  /* ---------- Mentors widget ---------- */
  .mentor-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:14px 14px 12px; margin-bottom:16px;
  }
  .mentor-row{display:flex; gap:16px; overflow-x:auto; padding-bottom:2px;}
  .mentor-item{
    display:flex; flex-direction:column; align-items:center; gap:6px;
    width:64px; flex-shrink:0; background:none; border:none; cursor:pointer; padding:0;
  }
  .mentor-avatar{
    width:48px;height:48px;border-radius:50%;
    background:linear-gradient(150deg, var(--sky), var(--card));
    border:2px solid var(--yellow);
    display:flex;align-items:center;justify-content:center;
    font-family:'Oswald',sans-serif; font-size:15px; color:var(--blue);
  }
  .mentor-name{font-size:10px; color:var(--ink); text-align:center; line-height:1.25;}

  /* ---------- Collapsible team list ---------- */
  .team-card{
    background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
    padding:6px 14px; margin-bottom:16px; overflow:hidden;
  }
  .team-picker{display:flex;flex-wrap:wrap;gap:6px;}
  .team-pick{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:999px;border:1px solid var(--line);background:var(--card);color:var(--ink);font-size:13px;cursor:pointer;}
  .team-pick input{accent-color:var(--blue);}
  .team-toggle{
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 0; background:none; border:none; width:100%; cursor:pointer;
  }
  .team-toggle-label{
    font-family:'Oswald', sans-serif; font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
  }
  .team-chevron{color:var(--muted); font-size:12px; transition:transform 0.2s;}
  .team-card.open .team-chevron{transform:rotate(180deg);}
  .team-body{max-height:0; overflow:hidden; transition:max-height 0.3s ease;}
  .team-row{
    display:flex; align-items:center; gap:10px;
    padding:8px 0; border-top:1px solid var(--line);
    background:none; border-left:none; border-right:none; border-bottom:none;
    width:100%; cursor:pointer; text-align:left;
  }
  .team-row-avatar{
    width:32px;height:32px;border-radius:50%;
    background:var(--sky); color:var(--blue);
    display:flex;align-items:center;justify-content:center;
    font-family:'Oswald',sans-serif; font-size:12px; flex-shrink:0;
  }
  .team-row-name{font-size:13px; color:var(--ink); flex:1;}
  .team-row-arrow{color:var(--muted); font-size:13px;}

  /* ---------- Viewer overlay (drill-in profile) ---------- */
  #viewerOverlay{z-index:112 !important;}
  .viewer-overlay{
    position:absolute; inset:0; background:var(--bg);
    display:none; flex-direction:column; z-index:60;
  }
  .viewer-overlay.open{display:flex;}
  .viewer-header{
    display:flex; align-items:center; gap:12px;
    padding:16px 20px 10px;
  }
  .back-btn{
    width:34px;height:34px;border-radius:10px; border:1px solid var(--line);
    background:var(--card); color:var(--ink); font-size:15px; cursor:pointer;
  }
  .viewer-header-title{font-family:'Oswald', sans-serif; font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--muted);}
  .viewer-body{flex:1; overflow-y:auto; padding:10px 20px 24px;}

  .board-btn{
    width:100%; margin-top:18px; padding:13px;
    border-radius:11px; border:none;
    background:var(--yellow); color:#fff;
    font-family:'Oswald', sans-serif; font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer;
  }

  /* ---------- Board modal ---------- */
  .name-toggle{display:flex; gap:8px; margin-bottom:10px;}
  .name-chip{
    font-size:11px; padding:6px 12px; border-radius:20px;
    border:1px solid var(--line); background:var(--sky); color:var(--muted); cursor:pointer;
  }
  .name-chip.active{background:var(--blue); border-color:var(--blue); color:#fff;}
  .name-input{
    width:100%; border:1px solid var(--line); border-radius:10px;
    padding:11px 12px; font-family:'Inter',sans-serif; font-size:13px; color:var(--ink);
    margin-bottom:12px; background:var(--card);
  }
  .board-textarea{
    width:100%; min-height:110px; border:1px solid var(--line); border-radius:12px;
    padding:12px; font-family:'Inter',sans-serif; font-size:13px; color:var(--ink);
    resize:none; background:var(--sky);
  }

  /* ---------- My board (own profile) ---------- */
  .board-entry{padding:10px 0; border-top:1px solid var(--line);}
  .board-entry-text{font-size:13px; color:var(--ink); line-height:1.4;}
  .board-entry-author{font-size:10.5px; color:var(--muted); margin-top:4px;}

  /* ---------- Board request (in notif panel) ---------- */
  .board-req{
    background:var(--sky); border-radius:12px; padding:10px 10px 8px; margin-bottom:8px;
  }
  .board-req-from{font-size:11px; color:var(--muted); margin-bottom:4px;}
  .board-req-text{font-size:12.5px; color:var(--ink); line-height:1.4; margin-bottom:8px;}
  .board-req-actions{display:flex; gap:6px;}
  .board-req-btn{
    flex:1; padding:7px; border-radius:8px; border:none; font-size:11px; cursor:pointer;
    font-family:'Oswald', sans-serif; letter-spacing:0.5px; text-transform:uppercase;
  }
  .board-req-approve{background:var(--blue); color:#fff;}
  .board-req-reject{background:var(--card); color:var(--muted); border:1px solid var(--line) !important;}
  .board-save-btn{
    width:100%; margin-top:12px; padding:11px;
    border-radius:10px; border:1.5px solid var(--gray-band); background:transparent;
    color:var(--muted); font-family:'Oswald', sans-serif; font-size:11.5px; letter-spacing:1px; text-transform:uppercase; cursor:pointer;
  }

  /* ---------- Toast ---------- */
  .toast{
    position:absolute; left:20px; right:20px; bottom:90px;
    background:var(--blue); color:#fff; border-radius:12px;
    padding:12px 14px; font-size:12.5px; text-align:center;
    opacity:0; transform:translateY(8px); transition:all 0.25s; z-index:130; pointer-events:none;
  }
  .toast.show{opacity:1; transform:translateY(0);}

  /* ---------- Auth / registration gate ---------- */
  .auth-overlay{
    position:absolute; inset:0; background:var(--bg);
    z-index:100; display:flex; flex-direction:column;
    padding:60px 28px 28px; overflow-y:auto;
  }
  .auth-brand{
    font-family:'Oswald', sans-serif; font-weight:600; font-size:20px;
    letter-spacing:2.5px; text-transform:uppercase; text-align:center; color:var(--ink); margin-bottom:4px;
  }
  .auth-brand span{color:var(--yellow);}
  .auth-sub{text-align:center; font-size:12.5px; color:var(--muted); margin-bottom:36px;}
  .auth-label{font-size:10.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); font-family:'Oswald', sans-serif; margin-bottom:6px;}
  .auth-msg{font-size:12px; min-height:18px; margin:-6px 0 14px; text-align:center;}
  .auth-link{
    text-align:center; font-size:12px; color:var(--blue); margin-top:22px;
    background:none; border:none; cursor:pointer; text-decoration:underline;
  }

  /* ---------- Admin roster panel ---------- */
  .admin-row{
    display:flex; align-items:center; gap:10px;
    padding:10px 0; border-top:1px solid var(--line);
  }
  .admin-row:first-child{border-top:none;}
  .admin-row-info{flex:1; min-width:0;}
  .admin-row-name{font-size:12.5px; color:var(--ink); font-weight:500;}
  .admin-row-meta{font-size:10.5px; color:var(--muted); margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .admin-del{
    width:26px; height:26px; border-radius:8px; border:1px solid var(--line);
    background:var(--card); color:var(--alert); font-size:13px; cursor:pointer; flex-shrink:0;
  }
  .admin-empty{font-size:12px; color:var(--muted); text-align:center; padding:16px 0;}
  select.name-input{ -webkit-appearance:none; appearance:none; }

  /* ---------- Upload sheet modal ---------- */
  .upload-modal{
    position:absolute; inset:0;
    background:rgba(15,23,64,0.55);
    display:none;
    align-items:flex-end;
    z-index:115;
  }
  .upload-modal.open{display:flex;}
  .upload-sheet{
    width:100%;
    background:var(--card);
    border-radius:22px 22px 0 0;
    padding:20px 20px 26px;
    box-shadow:0 -12px 30px rgba(0,0,0,0.2);
  }
  .sheet-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px;}
  .sheet-title{font-family:'Oswald', sans-serif; font-size:15px; font-weight:600; letter-spacing:0.3px;}
  .sheet-close{
    width:28px;height:28px;border-radius:50%;
    border:none; background:var(--sky); color:var(--muted);
    font-size:15px; cursor:pointer;
  }
  .sheet-sub{font-size:12px; color:var(--muted); margin:4px 0 16px; line-height:1.4;}

  .dropzone{
    border:1.5px dashed var(--gray-band);
    border-radius:14px;
    height:180px;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
    cursor:pointer;
    background:var(--sky);
    overflow:hidden;
    position:relative;
  }
  .dropzone-icon{font-size:26px;}
  .dropzone-text{font-size:12.5px; color:var(--muted); text-align:center; padding:0 20px;}
  .dropzone img{width:100%; height:100%; object-fit:cover; display:none;}
  .dropzone.has-image .dropzone-icon,
  .dropzone.has-image .dropzone-text{display:none;}
  .dropzone.has-image img{display:block;}
  .dropzone.has-image .change-hint{
    display:flex; position:absolute; bottom:8px; right:8px;
    background:rgba(15,23,64,0.65); color:#fff;
    font-size:10.5px; padding:5px 10px; border-radius:20px;
  }
  .change-hint{display:none;}

  .submit-btn{
    width:100%; margin-top:16px; padding:14px;
    border-radius:12px; border:none;
    background:var(--blue); color:#fff;
    font-family:'Oswald', sans-serif; font-size:13px; letter-spacing:1px; text-transform:uppercase;
    cursor:pointer;
  }
  .submit-btn:disabled{background:var(--line); color:var(--muted); cursor:not-allowed;}

  .stepper-card{cursor:pointer;}
  .stepper-card:active{background:var(--sky);}

  /* ---------- Section titles ---------- */
  .sect-title{
    font-family:'Oswald', sans-serif;
    font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--muted);
    margin:22px 0 10px;
    display:flex; align-items:center; gap:8px;
  }
  .sect-title::after{content:"";flex:1;height:1px;background:var(--line);}

  /* ---------- Schedule ---------- */
  .card{
    background:var(--card);
    border-radius:var(--radius);
    padding:14px 16px;
    margin-bottom:10px;
    border:1px solid var(--line);
  }
  .schedule-row{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);}
  .schedule-row:last-child{border-bottom:none;}
  .schedule-time{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px; color:var(--blue); width:60px; flex-shrink:0; padding-top:1px; font-weight:600;
  }
  .schedule-text{font-size:13.5px; color:var(--ink); line-height:1.4;}

  .card-title{font-size:13.5px; font-weight:600; color:var(--ink); margin-bottom:4px;}
  .card-sub{font-size:12px; color:var(--muted); line-height:1.4;}
  .card-cta{
    display:inline-flex; align-items:center; gap:6px; margin-top:10px;
    font-family:'Oswald', sans-serif; font-size:11.5px; letter-spacing:1px; text-transform:uppercase;
    color:#fff; background:var(--blue);
    padding:9px 14px; border-radius:9px; border:none; cursor:pointer;
  }
  .badge-dot{width:7px;height:7px;border-radius:50%;background:var(--yellow-deep);display:inline-block;margin-right:6px;}

  .msg-row{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);}
  .msg-row:last-child{border-bottom:none;}
  .msg-icon{
    width:30px;height:30px;border-radius:9px;
    background:var(--sky); color:var(--blue);
    display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0;
  }
  .msg-text{font-size:12.5px; color:var(--ink); line-height:1.35;}
  .msg-when{font-size:10.5px; color:var(--muted); margin-top:2px;}

  /* ================= PROFILE SCREEN ================= */
  .profile-head{display:flex;flex-direction:column;align-items:center;padding:14px 0 6px;text-align:center;}
  .role-chip{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px; color:var(--blue);
    background:var(--sky);
    border-radius:20px; padding:4px 10px;
    text-transform:uppercase; margin-bottom:14px;
  }
  .avatar-wrap{position:relative;width:96px;height:96px;margin-bottom:12px;}
  .avatar{
    width:96px;height:96px;border-radius:50%;
    background:linear-gradient(150deg, var(--sky), var(--card));
    border:3px solid var(--yellow);
    display:flex;align-items:center;justify-content:center;
    font-family:'Oswald',sans-serif; font-size:30px; color:var(--blue);
  }
  .verify-badge{
    position:absolute;bottom:-2px;right:-2px;width:26px;height:26px;border-radius:50%;
    background:var(--blue); border:3px solid var(--bg);
    display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;font-weight:700;
  }
  .p-name{font-family:'Oswald', sans-serif; font-size:20px; font-weight:600; letter-spacing:0.3px;}
  .p-nick{font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--blue); margin-top:2px;}
  .p-serial{font-family:'IBM Plex Mono', monospace; font-size:10px; color:var(--muted); letter-spacing:1px; margin-top:6px; text-transform:uppercase;}

  .social-row{display:flex;gap:8px;justify-content:center;margin:16px 0 4px;flex-wrap:wrap;}
  .social-chip{
    font-size:11.5px; color:var(--ink); background:var(--card);
    border:1px solid var(--line); border-radius:20px; padding:6px 12px;
    display:flex;align-items:center;gap:6px;
  }
  .social-chip b{color:var(--blue); font-weight:600;}

  .field-row{display:flex;justify-content:space-between;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line);}
  .field-label{font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);font-family:'Oswald', sans-serif;}
  .field-value{font-size:13.5px;color:var(--ink);}
  .field-value.muted{color:var(--muted);}

  .edit-btn{
    width:100%;margin-top:20px;padding:13px;border-radius:11px;
    border:1.5px solid var(--blue); background:transparent; color:var(--blue);
    font-family:'Oswald', sans-serif; font-size:12.5px; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer;
  }
  .edit-btn:active{background:var(--sky);}

  /* ---------- Bottom nav ---------- */
  .tabbar{
    display:flex; padding:10px 24px 14px;
    border-top:1px solid var(--line);
    background:var(--card);
  }
  .tabbar.hidden{display:none;}
  .tab{
    flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    background:none; border:none; color:var(--muted);
    font-family:'Inter', sans-serif; font-size:10px; cursor:pointer; padding:4px 0;
  }
  .tab-icon{font-size:17px; line-height:1;}
  .tab.active{color:var(--blue);}

/* ---- Повноекранний режим на телефоні (без рамки-макета) ---- */
@media (max-width:520px), (display-mode: standalone){
  html, body{margin:0 !important; padding:0 !important; background:var(--bg,#F5F6FA) !important; min-height:100dvh;}
  body{display:block !important;}
  .phone{width:100vw !important; max-width:100vw !important; height:100dvh !important; border:none !important; border-radius:0 !important; box-shadow:none !important;}
}