:root{
    --ink:#252525;
    --ink-soft:#666666;
    --ink-faint:#8a8a8a;
    --paper:#fafafa;
    --surface:#ffffff;
    --surface-soft:#f1f1f1;
    --line:#dedede;
    --green-950:#242424;
    --green-900:#383838;
    --green-800:#505050;
    --green-700:#666666;
    --mint:#777777;
    --mint-soft:#e9e9e9;
    --lime:#d7d7d7;
    --gold:#666666;
    --gold-soft:#eeeeee;
    --danger:#555555;
    --shadow:0 20px 60px rgba(30,30,30,.09);
    --shadow-soft:0 8px 28px rgba(30,30,30,.08);
    --radius-xl:32px;
    --radius-lg:22px;
    --radius-md:16px;
  }
  *{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
  html,body{margin:0;padding:0;height:100%;}
  body{font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;color:var(--ink);background:var(--paper);overflow:hidden;letter-spacing:-.01em;}
  button,input,textarea{font:inherit;}
  button{transition:transform .18s ease,box-shadow .18s ease,background .18s ease,border-color .18s ease;}
  button:active{transform:scale(.98);}
  button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid rgba(100,100,100,.28);outline-offset:2px;}
  .screen{position:fixed;inset:0;display:none;flex-direction:column;background:var(--paper);}
  .screen.active{display:flex;}
  
  /* Shared app chrome */
  .topbar{position:relative;z-index:2;display:flex;align-items:center;gap:14px;min-height:82px;padding:18px max(22px,calc((100vw - 1120px)/2)) 16px;background:rgba(251,252,248,.9);border-bottom:1px solid rgba(223,231,225,.8);backdrop-filter:blur(18px);}
  .topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:linear-gradient(90deg,transparent,var(--mint),transparent);opacity:.35;}
  .topbar .title{font-size:22px;font-weight:800;letter-spacing:-.05em;color:var(--green-950);}
  .topbar .sub{font-size:13px;font-weight:600;color:var(--ink-faint);margin-top:3px;letter-spacing:.01em;}
  .topbar .spacer{flex:1 1 auto;}
  .brand-logo{display:block;width:112px;height:42px;object-fit:contain;object-position:left center;}
  .gear,.back{border:1px solid var(--line);background:var(--surface);color:var(--green-900);width:44px;height:44px;border-radius:50%;font-size:23px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 4px 14px rgba(30,30,30,.05);}
  .gear:hover,.back:hover{border-color:var(--mint);box-shadow:0 8px 18px rgba(100,100,100,.15);}
  .avatar{width:48px;height:48px;border-radius:17px;background:linear-gradient(145deg,var(--lime),#b9b9b9);display:flex;align-items:center;justify-content:center;font-size:25px;flex:0 0 auto;box-shadow:inset 0 1px rgba(255,255,255,.7);}
  .avatar.big{width:58px;height:58px;border-radius:20px;font-size:31px;}
  
  /* Welcome / brand landing */
  .welcome{position:relative;isolation:isolate;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:40px 24px;overflow:hidden;background:radial-gradient(circle at 15% 15%,rgba(190,190,190,.43),transparent 30%),radial-gradient(circle at 90% 88%,rgba(100,100,100,.18),transparent 32%),var(--paper);}
  .welcome::before{content:"";position:absolute;z-index:-1;width:min(680px,120vw);height:min(680px,120vw);border-radius:50%;background:linear-gradient(135deg,rgba(255,255,255,.65),rgba(190,190,190,.23));filter:blur(1px);opacity:.8;}
  .welcome::after{content:"";position:absolute;z-index:-1;width:150px;height:150px;right:12%;top:13%;border-radius:50%;background:var(--mint);filter:blur(55px);opacity:.16;}
  .welcome .mark{width:104px;height:104px;margin-bottom:28px;border-radius:30px;display:grid;place-items:center;background:var(--surface);box-shadow:var(--shadow);overflow:hidden;animation:brandFloat 5s ease-in-out infinite;}
  .welcome .mark img{width:88px;height:88px;object-fit:contain;}
  .welcome h1{max-width:540px;margin:0 0 14px;font-size:clamp(35px,7vw,64px);line-height:1.02;letter-spacing:-.075em;color:var(--green-950);}
  .welcome p{max-width:470px;margin:0 0 28px;font-size:18px;line-height:1.55;color:var(--ink-soft);}
  .welcome .primary{max-width:360px;}
  
  /* Buttons */
  .primary{width:100%;margin-top:26px;padding:17px 22px;border:0;border-radius:17px;background:linear-gradient(110deg,var(--green-900),var(--green-700));color:#fff;font-size:17px;font-weight:800;cursor:pointer;box-shadow:0 12px 24px rgba(56,56,56,.2);}
  .primary:hover{box-shadow:0 16px 28px rgba(56,56,56,.28);transform:translateY(-1px);}
  .ghost{width:100%;margin-top:12px;padding:16px;font-size:16px;font-weight:800;background:transparent;color:var(--green-900);border:1px solid var(--green-700);border-radius:15px;cursor:pointer;}
  
  /* Home */
  .list{flex:1;overflow-y:auto;padding:28px max(22px,calc((100vw - 1120px)/2)) 140px;-webkit-overflow-scrolling:touch;}
  .row{position:relative;display:flex;align-items:center;gap:15px;max-width:760px;margin:0 auto 12px;padding:16px 18px;border:1px solid var(--line);border-radius:22px;cursor:pointer;background:rgba(255,255,255,.78);box-shadow:0 5px 20px rgba(30,30,30,.035);}
  .row:hover{border-color:rgba(90,90,90,.42);background:#fff;box-shadow:var(--shadow-soft);transform:translateY(-1px);}
  .row .info{flex:1;min-width:0;}.row .name{font-size:18px;font-weight:800;color:var(--green-950);}.row .preview{font-size:14px;color:var(--ink-soft);margin-top:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}.row .when{font-size:12px;color:var(--ink-faint);align-self:flex-start;margin-top:5px;}.row .del{border:0;background:transparent;font-size:18px;padding:8px;color:var(--danger);cursor:pointer;opacity:.5;}.row:hover .del{opacity:1;}
  .empty{max-width:560px;margin:12vh auto 0;padding:48px 24px;text-align:center;color:var(--ink-soft);font-size:16px;line-height:1.6;}.empty .big{font-size:27px;font-weight:850;letter-spacing:-.05em;color:var(--green-950);margin-bottom:8px;}
  .fab{position:absolute;z-index:3;right:max(22px,calc((100vw - 1120px)/2));left:auto;bottom:28px;padding:16px 22px;border:0;border-radius:99px;background:var(--green-950);color:#fff;font-size:16px;font-weight:800;box-shadow:0 16px 35px rgba(36,36,36,.3);cursor:pointer;}.fab:hover{background:var(--green-800);transform:translateY(-2px);}
  .quota-bar{display:flex;align-items:center;gap:10px;min-height:47px;padding:8px max(22px,calc((100vw - 1120px)/2));background:rgba(241,245,239,.74);border-bottom:1px solid var(--line);color:var(--ink-soft);font-size:13px;font-weight:650;}.quota-bar .spacer{flex:1;}
  
  /* Forms */
  .form{width:min(100%,720px);margin:0 auto;flex:1;overflow-y:auto;padding:30px 22px 60px;}label{display:block;font-size:14px;font-weight:800;color:var(--green-950);margin:24px 0 9px;letter-spacing:.01em;}label:first-of-type{margin-top:4px;}.hint{font-size:13px;color:var(--ink-faint);margin-top:8px;line-height:1.55;}.form input[type=text],textarea.desc{width:100%;font-size:16px;font-family:inherit;padding:15px 16px;border:1px solid var(--line);border-radius:15px;outline:none;background:var(--surface);color:var(--ink);box-shadow:0 3px 10px rgba(30,30,30,.025);}.form input[type=text]::placeholder,textarea::placeholder{color:#999999}.form input[type=text]:focus,textarea.desc:focus{border-color:var(--green-700);box-shadow:0 0 0 4px rgba(90,90,90,.1)}textarea.desc{min-height:120px;resize:vertical;line-height:1.5}.presets{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:9px;}.preset{padding:13px 10px;font-size:14px;font-weight:750;color:var(--ink-soft);border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer;text-align:center;}.preset:hover{border-color:var(--green-700);color:var(--green-900);}.preset.sel{border-color:var(--green-700);background:var(--mint-soft);color:var(--green-900);box-shadow:inset 0 0 0 1px rgba(90,90,90,.1);}
  
  /* Chat */
  .chat{flex:1;overflow-y:auto;padding:28px max(18px,calc((100vw - 860px)/2)) 14px;background:radial-gradient(circle at 80% 0%,rgba(190,190,190,.14),transparent 34%),linear-gradient(180deg,#f4f4f4 0%,#e9e9e9 100%);-webkit-overflow-scrolling:touch;}.bubble{max-width:min(680px,84%);padding:14px 16px;margin-bottom:12px;border-radius:20px;font-size:16px;line-height:1.55;word-wrap:break-word;white-space:pre-wrap;box-shadow:0 5px 16px rgba(30,30,30,.06);}.bubble.me{background:var(--green-900);color:#fff;margin-left:auto;border-bottom-right-radius:6px;}.bubble.them{background:rgba(255,255,255,.92);color:var(--ink);margin-right:auto;border-bottom-left-radius:6px;border:1px solid rgba(223,231,225,.75);}.bubble img{max-width:100%;border-radius:14px;display:block;margin-bottom:8px;}.time{font-size:11px;color:rgba(82,96,93,.75);text-align:right;margin-top:7px;}.bubble.me .time{color:rgba(255,255,255,.68)}.typing{font-style:italic;color:var(--ink-faint);}.composer{flex:0 0 auto;display:flex;align-items:flex-end;gap:9px;padding:12px max(18px,calc((100vw - 860px)/2)) calc(14px + env(safe-area-inset-bottom));background:rgba(251,252,248,.9);border-top:1px solid var(--line);backdrop-filter:blur(16px);}.composer textarea{flex:1;font-size:16px;font-family:inherit;padding:14px 17px;border:1px solid var(--line);border-radius:19px;resize:none;max-height:140px;min-height:52px;outline:none;background:#fff;color:var(--ink);}.iconbtn,.sendbtn{width:52px;height:52px;border-radius:17px;cursor:pointer;flex:0 0 auto;}.iconbtn{background:var(--surface);font-size:22px;border:1px solid var(--line);}.sendbtn{border:0;background:var(--green-900);color:#fff;font-size:21px;box-shadow:0 8px 18px rgba(56,56,56,.2);}.sendbtn:disabled{opacity:.45;box-shadow:none}.attach-preview{padding:10px max(18px,calc((100vw - 860px)/2));background:#fff;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;font-size:14px;color:var(--ink-soft);}.attach-preview img{height:58px;border-radius:12px;}
  
  
  @keyframes brandFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-7px) rotate(1deg)}}
  @media (max-width:680px){.topbar{min-height:72px;padding-left:16px;padding-right:16px}.brand-logo{width:96px;height:36px}.list{padding-left:16px;padding-right:16px}.fab{right:16px;left:16px;text-align:center}.quota-bar{padding-left:16px;padding-right:16px}.row{border-radius:18px}.chat{padding-left:14px;padding-right:14px}.composer{padding-left:12px;padding-right:12px}.welcome h1{font-size:42px}.welcome p{font-size:16px}.form{padding-left:18px;padding-right:18px}}
  @media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}
  
  /* Final logo-only control polish */
  .gear,.back{width:auto;min-width:44px;height:44px;padding:0 13px;border-radius:50px;font-size:12px;font-weight:800;}
  .avatar{font-size:0;overflow:hidden;}
  .avatar img{width:100%;height:100%;object-fit:cover;mix-blend-mode:multiply;}
  .iconbtn,.sendbtn{font-size:11px;font-weight:850;letter-spacing:.01em;}
  
  /* Code-driven brand mark sizing */
  .brand-logo{display:flex;align-items:center;width:112px;height:42px;}
  .brand-logo img{display:block;width:100%;height:100%;object-fit:contain;object-position:left center;}
  @media(max-width:680px){.fab{bottom:22px}}
  
  /* Shared token allowance UI */
  .quota-bar{min-height:61px;gap:14px;padding-top:9px;padding-bottom:9px}.quota-copy{display:flex;flex-direction:column;gap:3px;min-width:165px}.quota-kicker{font-size:9px;letter-spacing:.14em;font-weight:900;color:#999}.quota-copy strong{font-size:13px;color:#444;letter-spacing:-.02em}.quota-progress{position:relative;width:min(190px,22vw);height:6px;overflow:hidden;border-radius:99px;background:#e6e6e6}.quota-progress i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#858585,#3d3d3d);transition:width .25s cubic-bezier(.2,.8,.2,1)}
  .chat-heading{min-width:0;}.chat-heading .title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  @media(max-width:680px){.quota-bar{gap:8px;padding-left:12px;padding-right:12px}.quota-copy{min-width:145px}.quota-progress{width:25vw}.quota-kicker{font-size:8px}.quota-copy strong{font-size:12px}}
  @media(max-width:680px){.topbar{gap:8px}.topbar .title{font-size:18px}.topbar .sub{font-size:11px}.topbar .gear{min-width:44px;padding-left:8px;padding-right:8px}}
  
  /* =========================================================
     Responsive conversation refresh
     ========================================================= */
  :root{
    --blue:#0a84ff;
    --blue-dark:#0068d7;
    --message-gray:#e9e9eb;
    --chrome:rgba(250,250,252,.88);
    --system-gray:#8e8e93;
    --safe-bottom:env(safe-area-inset-bottom, 0px);
  }
  
  html{height:100%;background:#f2f2f7;}
  body{min-height:100%;background:#f2f2f7;color:#1c1c1e;letter-spacing:-.018em;}
  .screen{height:100dvh;min-height:0;background:#f2f2f7;}
  .screen.active{isolation:isolate;}
  
  .topbar{
    min-height:64px;
    flex:0 0 auto;
    padding:10px max(16px,calc((100vw - 1180px)/2)) 9px;
    gap:11px;
    background:var(--chrome);
    border-bottom:1px solid rgba(60,60,67,.18);
    box-shadow:0 1px 0 rgba(255,255,255,.7);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
  }
  .topbar::after{display:none;}
  .topbar .title{font-size:17px;font-weight:700;letter-spacing:-.025em;color:#1c1c1e;}
  .topbar .sub{font-size:12px;font-weight:500;color:var(--system-gray);margin-top:1px;}
  .back,.gear{
    min-width:36px;width:36px;height:36px;padding:0;
    border:0;border-radius:50%;
    background:transparent;color:var(--blue);
    box-shadow:none;font-size:27px;font-weight:300;line-height:1;
  }
  .back:hover,.gear:hover{background:rgba(118,118,128,.12);border:0;box-shadow:none;transform:none;}
  .gear{width:auto;min-width:36px;padding:0 8px;font-size:13px;font-weight:600;}
  .avatar{
    width:34px;height:34px;border-radius:50%;
    background:#d1d1d6;box-shadow:none;
  }
  .avatar img{mix-blend-mode:multiply;}
  .chat-heading{max-width:min(30vw,270px);}
  .chat-heading .title{max-width:100%;overflow:hidden;text-overflow:ellipsis;}
  .chat-heading .sub::before{content:"";display:inline-block;width:6px;height:6px;margin:0 4px 1px 0;border-radius:50%;background:#34c759;}
  
  .quota-bar{
    min-height:42px;
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
    padding:7px max(16px,calc((100vw - 1180px)/2));
    background:rgba(242,242,247,.94);
    border-bottom:1px solid rgba(60,60,67,.14);
    color:var(--system-gray);
  }
  .quota-copy{min-width:0;gap:1px;}
  .quota-kicker{font-size:8px;letter-spacing:.11em;color:#8e8e93;}
  .quota-copy strong{font-size:12px;color:#636366;font-weight:600;}
  .quota-progress{width:min(160px,20vw);height:5px;background:rgba(118,118,128,.16);}
  .quota-progress i{background:var(--blue);}
  
  .list{
    min-height:0;
    padding:18px max(16px,calc((100vw - 760px)/2)) calc(104px + var(--safe-bottom));
    background:#f2f2f7;
  }
  .row{
    max-width:760px;
    margin:0 auto 1px;
    padding:12px 5px 12px 0;
    border:0;
    border-radius:0;
    background:transparent;
    box-shadow:none;
    border-bottom:1px solid rgba(60,60,67,.13);
  }
  .row:hover{border-color:rgba(60,60,67,.13);background:transparent;box-shadow:none;transform:none;}
  .row .avatar.big{width:50px;height:50px;border-radius:50%;font-size:0;background:#d1d1d6;}
  .row .name{font-size:16px;color:#1c1c1e;font-weight:700;}
  .row .preview{font-size:14px;color:#8e8e93;margin-top:3px;}
  .row .when{font-size:12px;color:#8e8e93;margin:2px 3px 0 8px;}
  .row .del{font-size:13px;color:#ff3b30;opacity:.7;}
  .empty{margin:15vh auto 0;color:#8e8e93;}
  .empty .big{font-size:20px;color:#1c1c1e;}
  .fab{
    right:max(16px,calc((100vw - 760px)/2));
    bottom:calc(20px + var(--safe-bottom));
    padding:13px 18px;
    border-radius:12px;
    background:var(--blue);
    font-size:15px;
    box-shadow:0 6px 18px rgba(10,132,255,.28);
  }
  .fab:hover{background:var(--blue-dark);box-shadow:0 8px 22px rgba(10,132,255,.34);transform:translateY(-1px);}
  
  .form{
    min-height:0;
    padding:22px 20px calc(44px + var(--safe-bottom));
    width:min(100%,700px);
  }
  label{font-size:13px;color:#3a3a3c;margin:22px 0 8px;}
  label:first-of-type{margin-top:3px;}
  .form input[type=text],textarea.desc{
    padding:13px 14px;
    border:1px solid rgba(60,60,67,.22);
    border-radius:11px;
    background:#fff;
    box-shadow:none;
  }
  .form input[type=text]:focus,textarea.desc:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(10,132,255,.14);}
  textarea.desc{min-height:100px;}
  .presets{grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:8px;}
  .preset{
    min-height:44px;padding:11px 9px;
    border:1px solid rgba(60,60,67,.18);
    border-radius:11px;background:#fff;color:#636366;
    font-size:13px;font-weight:600;
  }
  .preset:hover{border-color:rgba(10,132,255,.5);color:var(--blue);background:#fff;}
  .preset.sel{border-color:var(--blue);background:rgba(10,132,255,.08);color:var(--blue-dark);box-shadow:inset 0 0 0 1px var(--blue);}
  .primary{margin-top:24px;padding:14px 18px;border-radius:12px;background:var(--blue);box-shadow:0 6px 16px rgba(10,132,255,.22);font-size:16px;}
  .primary:hover{background:var(--blue-dark);box-shadow:0 8px 20px rgba(10,132,255,.28);}
  
  .chat{
    min-height:0;
    padding:18px max(16px,calc((100vw - 760px)/2)) 10px;
    background:#fff;
    overscroll-behavior:contain;
  }
  .bubble{
    display:table;
    width:fit-content;
    max-width:min(680px,78%);
    padding:9px 13px;
    margin-bottom:4px;
    border-radius:18px;
    font-size:16px;line-height:1.4;
    overflow-wrap:anywhere;
    word-break:normal;
    box-shadow:none;
  }
  .bubble.me{background:var(--blue);color:#fff;border-bottom-right-radius:5px;}
  .bubble.them{background:var(--message-gray);color:#1c1c1e;border:0;border-bottom-left-radius:5px;}
  .bubble img{display:block;max-width:100%;height:auto;border-radius:14px;margin:-2px -4px 7px;}
  .time{font-size:10px;color:#8e8e93;margin-top:5px;}
  .bubble.me .time{color:rgba(255,255,255,.72);}
  .typing{
    display:flex;gap:5px;align-items:center;
    width:68px;min-width:68px;min-height:40px;
    padding:11px 14px;border-radius:20px;
    font-size:0;
  }
  .typing::before,.typing::after{content:"";width:5px;height:5px;border-radius:50%;background:#8e8e93;animation:typingDot 1.15s infinite ease-in-out;}
  .typing::after{animation-delay:.18s;box-shadow:9px 0 #8e8e93;}
  @keyframes typingDot{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-3px);opacity:1}}
  
  .composer{
    min-height:62px;
    padding:8px max(16px,calc((100vw - 760px)/2)) calc(8px + var(--safe-bottom));
    gap:8px;
    background:var(--chrome);
    border-top:1px solid rgba(60,60,67,.18);
    backdrop-filter:saturate(180%) blur(20px);
    -webkit-backdrop-filter:saturate(180%) blur(20px);
  }
  .composer textarea{
    min-height:42px;max-height:128px;padding:10px 13px;
    border:1px solid rgba(60,60,67,.24);border-radius:20px;
    font-size:16px;background:#fff;box-shadow:none;
  }
  .composer textarea:focus{border-color:var(--blue);box-shadow:0 0 0 2px rgba(10,132,255,.12);}
  .iconbtn,.sendbtn{width:38px;height:38px;border-radius:50%;font-size:0;}
  .iconbtn{border:0;background:transparent;color:var(--blue);position:relative;}
  .iconbtn::before{content:"+";font-size:25px;line-height:1;font-weight:300;}
  .iconbtn:hover{background:rgba(118,118,128,.12);}
  .sendbtn{background:var(--blue);box-shadow:none;position:relative;}
  .sendbtn::before{content:"↑";font-size:22px;font-weight:700;line-height:1;}
  .sendbtn:hover{background:var(--blue-dark);box-shadow:none;transform:none;}
  .sendbtn:disabled{background:#c7c7cc;opacity:1;}
  .attach-preview{padding:8px max(16px,calc((100vw - 760px)/2));background:rgba(250,250,252,.96);border-top:1px solid rgba(60,60,67,.14);}
  .attach-preview img{height:52px;border-radius:10px;}
  
  .modal-card{border-radius:20px;padding:24px 20px 18px;}
  
  @media (max-width:700px){
    .topbar{padding-left:10px;padding-right:10px;}
    .chat-heading{max-width:29vw;}
    .quota-bar{padding-left:12px;padding-right:12px;gap:7px;}
    .quota-progress{width:clamp(50px,18vw,100px);}
    .quota-copy{flex:1;}
    .quota-kicker{font-size:7px;letter-spacing:.07em;}
    .quota-copy strong{font-size:11px;}
    .chat{padding-left:12px;padding-right:12px;}
    .composer{padding-left:9px;padding-right:9px;}
    .bubble{max-width:86%;}
    .form{padding-left:16px;padding-right:16px;}
  }
  @media (max-width:420px){
    .topbar{gap:6px;}
    .topbar .back{margin-left:-5px;}
    .avatar{width:31px;height:31px;}
    .chat-heading .title{font-size:15px;}
    .chat-heading .sub{font-size:11px;}
    .gear{font-size:11px;padding:0 4px;}
    .quota-progress{display:none;}
    .bubble{font-size:15px;}
  }
  @media (min-width:1000px){
    .chat{padding-top:26px;}
    .composer{min-height:70px;}
  }
  @media (prefers-reduced-motion:reduce){
    .typing::before,.typing::after{animation:none;}
  }
  
  /* Keep typing dots structural instead of relying on a wrapping text label. */
  .typing{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    width:64px;
    min-width:64px;
    max-width:none;
    min-height:38px;
    padding:10px 13px;
    font-size:0;
    line-height:0;
  }
  .typing::before,.typing::after{display:none;}
  .typing-dot{
    display:block;
    width:5px;
    height:5px;
    flex:0 0 5px;
    border-radius:50%;
    background:#8e8e93;
    animation:typingDot 1.15s infinite ease-in-out;
  }
  .typing-dot:nth-child(2){animation-delay:.18s;}
  .typing-dot:nth-child(3){animation-delay:.36s;}
  
  @media (max-width:700px){
    .topbar{z-index:20;}
  }
  
  @media (prefers-reduced-motion:reduce){
    .typing-dot{animation:none;}
  }

  .pro-badge{
    flex:0 0 auto;padding:4px 7px;border-radius:99px;
    background:rgba(255,159,10,.14);color:#9a5700;font-size:9px;font-weight:700;
  }
  .buy-pro{
    flex:0 0 auto;padding:6px 10px;border:0;border-radius:99px;
    background:rgba(255,159,10,.14);color:#9a5700;font-size:11px;font-weight:700;cursor:pointer;
  }
  .buy-pro:hover{background:rgba(255,159,10,.23);}
  .modal{
    position:fixed;inset:0;z-index:60;display:none;align-items:center;justify-content:center;
    padding:18px;background:rgba(0,0,0,.55);backdrop-filter:blur(12px);
  }
  .modal.open{display:flex;}
  .modal-card{
    width:min(100%,460px);max-height:92vh;overflow-y:auto;padding:24px 20px 18px;
    border:1px solid rgba(255,255,255,.72);border-radius:22px;background:#fff;
    text-align:center;box-shadow:0 30px 80px rgba(0,0,0,.28);
  }
  .pro-kicker{
    display:inline-block;padding:7px 12px;border-radius:99px;
    background:rgba(255,159,10,.14);color:#8a5a00;font-size:11px;font-weight:800;
    letter-spacing:1px;text-transform:uppercase;
  }
  .modal-card h2{margin:14px 0 7px;font-size:28px;letter-spacing:-.04em;color:#1c1c1e;}
  .pro-price{margin:4px 0 17px;font-size:23px;font-weight:850;color:#1c1c1e;}
  .pro-price span{display:block;margin-top:4px;color:#8e8e93;font-size:14px;font-weight:600;}
  .payment-note{
    padding:13px 14px;margin:0 0 16px;border-radius:14px;
    background:#fff8e8;border:1px solid #f0dcae;color:#4d4d4d;
    font-size:13px;line-height:1.5;text-align:left;
  }
  .modal-card p{font-size:14px;line-height:1.5;color:#636366;margin:10px 0;}
  .qr-frame{display:inline-flex;padding:9px;background:#fff;border:1px solid #dedede;border-radius:14px;}
  .qr-code{display:block;max-width:210px;width:100%;height:auto;border-radius:8px;}
  .verify-toggle{
    width:100%;margin-top:16px;padding:12px;border:1px solid #dedede;border-radius:12px;
    background:#f2f2f7;color:#1c1c1e;font-size:14px;font-weight:700;cursor:pointer;
  }
  .code-area{display:none;margin-top:15px;padding-top:15px;border-top:1px solid #dedede;}
  .code-area.open{display:block;}
  .code-label{margin-bottom:10px;color:#636366;font-size:13px;font-weight:700;}
  .code-boxes{display:flex;justify-content:center;gap:7px;}
  .code-boxes input{
    width:40px;height:46px;border:1px solid #c7c7cc;border-radius:10px;
    color:#1c1c1e;background:#fff;text-align:center;font-size:21px;font-weight:800;
  }
  .modal-card .primary{margin-top:14px;padding:13px;font-size:15px;}
  .modal-close{
    width:100%;margin-top:7px;padding:11px;border:0;border-radius:12px;
    background:transparent;color:#8e8e93;font-size:14px;font-weight:700;cursor:pointer;
  }
  .modal-error{min-height:20px;margin-top:8px;color:#ff3b30;font-size:13px;}

  @media(max-width:520px){
    .quota-bar{gap:7px;}
    .pro-badge{font-size:8px;padding:4px 5px;}
    .buy-pro{font-size:10px;padding:6px 8px;}
  }