:root{
    --bg:#0d1117;
    --surface:#161b22;
    --surface-hover:#1c232c;
    --border:#22272e;
    --text:#e6edf3;
    --muted:#7d8590;
    --muted-2:#565f6b;
    --key:#ffa657;      /* yaml/js keys */
    --string:#79c0ff;   /* links / values */
    --comment:#8b949e;  /* comments */
    --tag:#a5d6ff;
    --accent:#ffa657;
    --ok:#3fb950;
    --err:#f85149;
    --radius:10px;
  }

  *{ box-sizing:border-box; }

  html,body{
    margin:0;
    padding:0;
    background:var(--bg);
    background-image:
      radial-gradient(circle at 15% 0%, rgba(255,166,87,0.05), transparent 40%),
      radial-gradient(circle at 85% 100%, rgba(121,192,255,0.05), transparent 40%);
    color:var(--text);
    font-family:'JetBrains Mono', ui-monospace, monospace;
    -webkit-font-smoothing:antialiased;
  }

  .editor{
    max-width:640px;
    margin:0 auto;
    min-height:100vh;
    display:flex;
    flex-direction:column;
  }

  /* --- back link to main site --- */
  .back-link{
    padding:14px 16px 0 16px;
  }
  .back-link a{
    color:var(--muted);
    font-size:12px;
    text-decoration:none;
  }
  .back-link a:hover{
    color:var(--string);
    text-decoration:underline;
  }

  /* --- tab bar --- */
  .tabbar{
    display:flex;
    align-items:center;
    gap:2px;
    padding:14px 16px 0 16px;
    overflow-x:auto;
    scrollbar-width:none;
  }
  .tabbar::-webkit-scrollbar{ display:none; }

  .tab{
    font-size:12.5px;
    padding:8px 14px;
    border-radius:8px 8px 0 0;
    color:var(--muted-2);
    white-space:nowrap;
    border:1px solid transparent;
    border-bottom:none;
    cursor:pointer;
  }
  .tab.active{
    background:var(--surface);
    color:var(--text);
    border-color:var(--border);
  }
  .tab .dot{
    display:inline-block;
    width:6px;height:6px;
    border-radius:50%;
    background:var(--muted-2);
    margin-right:7px;
    vertical-align:middle;
  }
  .tab.active .dot{ background:var(--accent); }

  /* --- announcement bar (auto-hides when empty, see script.js) --- */
  .announcement{
    margin:12px 12px 0 12px;
    padding:10px 14px;
    background:rgba(121,192,255,0.08);
    border:1px solid rgba(121,192,255,0.25);
    border-radius:8px;
    color:var(--tag);
    font-size:12.5px;
    line-height:1.5;
    text-align:center;
  }

  /* --- file body --- */
  .file{
    background:var(--surface);
    border:1px solid var(--border);
    border-top:none;
    border-radius:0 0 var(--radius) var(--radius);
    margin:0 12px 40px 12px;
    overflow:hidden;
  }

  .line{
    display:flex;
    padding:2px 0;
  }
  .gutter{
    flex:0 0 40px;
    text-align:right;
    padding-right:14px;
    color:#30363d;
    font-size:12.5px;
    user-select:none;
    line-height:22px;
  }
  .code{
    flex:1;
    padding-right:16px;
    font-size:13.5px;
    line-height:22px;
    white-space:pre-wrap;
  }

  .cm{ color:var(--comment); font-style:italic; }
  .key{ color:var(--key); }
  .punct{ color:var(--muted); }

  /* --- hero / profile block --- */
  .hero{
    display:flex;
    align-items:center;
    gap:14px;
    margin:18px 0 6px 0;
    padding:0 16px 16px 16px;
    border-bottom:1px dashed var(--border);
  }
  .avatar{
    flex:0 0 46px;
    width:46px;height:46px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:16px;
    color:#0d1117;
    overflow:hidden;
  }
  .avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    border-radius:50%;
    display:block;
  }
  .hero-text .name{
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:16px;
    color:var(--text);
  }
  .hero-text .handle{
    font-size:12.5px;
    color:var(--muted);
    margin-top:2px;
  }

  /* --- section labels --- */
  .section-key{
    padding:18px 16px 4px 56px;
    font-size:13px;
    color:var(--key);
    font-weight:600;
  }

  /* --- generic entry list (reused for link history) --- */
  .entries{
    padding:2px 16px 8px 56px;
    display:flex;
    flex-direction:column;
    gap:8px;
  }

  /* --- shorten / generic form --- */
  .app-form{
    padding:2px 16px 8px 56px;
    display:flex;
    flex-direction:column;
    gap:12px;
    max-width:420px;
  }
  .form-row{
    display:flex;
    flex-direction:column;
    gap:5px;
  }
  .form-row label{
    font-size:11.5px;
    color:var(--muted);
    text-transform:lowercase;
  }
  .form-row input,
  .form-row textarea{
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:9px 12px;
    color:var(--text);
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:13px;
    resize:vertical;
    transition:border-color .15s ease;
  }
  .form-row input:focus,
  .form-row textarea:focus{
    outline:none;
    border-color:var(--accent);
  }
  .hp-field{
    position:absolute;
    width:1px;
    height:1px;
    overflow:hidden;
    opacity:0;
    pointer-events:none;
  }
  .submit-btn{
    align-self:flex-start;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:10px 18px;
    color:var(--string);
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:13px;
    font-weight:500;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, transform .1s ease;
  }
  .submit-btn:hover{
    background:var(--surface-hover);
    border-color:#3a4552;
    transform:translateX(2px);
  }
  .submit-btn:disabled{
    opacity:.6;
    cursor:default;
    transform:none;
  }
  .form-status{
    font-size:12px;
    line-height:1.5;
    min-height:16px;
  }
  .form-status.ok{ color:var(--ok); }
  .form-status.err{ color:var(--err); }

  /* --- result box after shortening --- */
  .result-box{
    margin:4px 16px 8px 56px;
    padding:12px 14px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:8px;
    max-width:420px;
  }
  .result-label{
    font-size:11px;
    color:var(--comment);
    font-style:italic;
    margin-bottom:8px;
  }
  .result-row{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
  }
  .result-url{
    color:var(--string);
    font-size:13.5px;
    text-decoration:none;
    word-break:break-all;
  }
  .result-url:hover{ text-decoration:underline; }
  .copy-btn{
    flex:0 0 auto;
    background:var(--surface);
    border:1px solid var(--border);
    border-radius:6px;
    padding:6px 10px;
    color:var(--muted);
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:11.5px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .copy-btn:hover{
    background:var(--surface-hover);
    color:var(--text);
    border-color:#3a4552;
  }
  .copy-btn.copied{
    color:var(--ok);
    border-color:var(--ok);
  }

  /* --- my-links.json history list --- */
  .link-item{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:var(--bg);
    border:1px solid var(--border);
    border-radius:8px;
    padding:11px 14px;
  }
  .link-item .link-main{ min-width:0; }
  .link-item .link-short{
    color:var(--string);
    font-size:13.5px;
    font-weight:500;
    text-decoration:none;
  }
  .link-item .link-short:hover{ text-decoration:underline; }
  .link-item .link-original{
    color:var(--muted);
    font-size:11.5px;
    margin-top:3px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .link-item .link-actions{
    display:flex;
    gap:6px;
    flex:0 0 auto;
  }
  .icon-btn{
    background:none;
    border:1px solid var(--border);
    border-radius:6px;
    padding:6px 9px;
    color:var(--muted);
    font-family:'JetBrains Mono', ui-monospace, monospace;
    font-size:11.5px;
    cursor:pointer;
    transition:background .15s ease, color .15s ease, border-color .15s ease;
  }
  .icon-btn:hover{
    background:var(--surface-hover);
    color:var(--text);
    border-color:#3a4552;
  }
  .empty-state{
    padding:2px 16px 8px 56px;
    color:var(--muted-2);
    font-size:12.5px;
    font-style:italic;
  }

  .footer{
    padding:20px 16px 26px 56px;
    color:var(--muted-2);
    font-size:12px;
  }
  .cursor{
    display:inline-block;
    width:7px;height:14px;
    background:var(--accent);
    margin-left:6px;
    vertical-align:middle;
    animation:blink 1.1s step-end infinite;
  }
  @keyframes blink{ 50%{ opacity:0; } }

  .footer a{ color:var(--muted); }
  .footer a:hover{ color:var(--string); }

  @media (max-width:480px){
    .entries, .section-key, .footer, .app-form, .result-box{ padding-left:16px; margin-left:0; }
    .gutter{ flex-basis:26px; }
  }