/* ============================================================
   FireTool — iOS 26 Liquid Glass Native App Style
   ============================================================ */

/* ---------- Design Tokens ---------- */
:root {
    /* Theme accent (overridden by JS) */
    --theme-accent: #007AFF;
    --theme-accent-light: #5AC8FA;
    --theme-glow: rgba(0,122,255,0.12);

    /* iOS 26 System Colors */
    --ios-blue:    var(--theme-accent);
    --ios-green:   #30D158;
    --ios-orange:  #FF9F0A;
    --ios-red:     #FF453A;
    --ios-purple:  #BF5AF2;
    --ios-pink:    #FF375F;
    --ios-teal:    var(--theme-accent-light);
    --ios-yellow:  #FFD60A;
    --ios-indigo:  #5E5CE6;
    --ios-mint:    #66D4CF;

    /* Surfaces */
    --bg-base:         #000000;
    --bg-primary:      #1C1C1E;
    --bg-secondary:    #2C2C2E;
    --bg-tertiary:     #3A3A3C;
    --bg-grouped:      #000000;

    /* Glass */
    --glass-bg:        rgba(255,255,255,0.06);
    --glass-bg-thick:  rgba(255,255,255,0.10);
    --glass-bg-hover:  rgba(255,255,255,0.09);
    --glass-border:    rgba(255,255,255,0.10);
    --glass-border-hi: rgba(255,255,255,0.20);
    --glass-blur:      blur(40px) saturate(180%);
    --glass-shine:     linear-gradient(180deg, rgba(255,255,255,0.12) 0%, rgba(255,255,255,0) 50%);
    --glass-top-line:  linear-gradient(90deg, transparent, rgba(255,255,255,0.25), transparent);

    /* Text */
    --text-1: #FFFFFF;
    --text-2: rgba(255,255,255,0.70);
    --text-3: rgba(255,255,255,0.45);
    --text-4: rgba(255,255,255,0.25);

    /* Spacing */
    --sidebar-w: 280px;
    --radius-xs:  8px;
    --radius-sm: 12px;
    --radius-md: 16px;
    --radius-lg: 20px;
    --radius-xl: 24px;
    --radius-pill: 100px;
}

/* ---------- Light Mode ---------- */
[data-appearance="light"] {
    --bg-base:         #F2F2F7;
    --bg-primary:      #FFFFFF;
    --bg-secondary:    #F2F2F7;
    --bg-tertiary:     #E5E5EA;
    --bg-grouped:      #F2F2F7;

    --glass-bg:        rgba(255,255,255,0.72);
    --glass-bg-thick:  rgba(255,255,255,0.82);
    --glass-bg-hover:  rgba(255,255,255,0.85);
    --glass-border:    rgba(0,0,0,0.06);
    --glass-border-hi: rgba(0,0,0,0.12);
    --glass-shine:     linear-gradient(180deg, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 50%);
    --glass-top-line:  linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);

    --text-1: #1C1C1E;
    --text-2: rgba(60,60,67,0.75);
    --text-3: rgba(60,60,67,0.45);
    --text-4: rgba(60,60,67,0.25);
}

/* ---------- Reset ---------- */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{
    scroll-behavior:smooth;
    -webkit-text-size-adjust:100%;
    background:var(--bg-base);
}
body{
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text',
                 'PingFang SC', 'Helvetica Neue', Arial, sans-serif;
    background: var(--bg-base);
    color: var(--text-1);
    line-height: 1.5;
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
}
a{text-decoration:none;color:inherit}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
input,textarea,select{font-family:inherit;color:inherit}

/* ---------- Background Ambience ---------- */
body::before{
    content:'';
    position:fixed;inset:0;z-index:-2;
    pointer-events:none;
    background:
        radial-gradient(ellipse 80% 60% at 15% 20%, var(--theme-glow), transparent),
        radial-gradient(ellipse 60% 80% at 85% 30%, rgba(191,90,242,0.08), transparent),
        radial-gradient(ellipse 70% 50% at 50% 85%, rgba(48,209,88,0.04), transparent),
        var(--bg-base);
    animation: ambience 30s ease-in-out infinite alternate;
}
@keyframes ambience{
    0%{filter:hue-rotate(0deg)}
    100%{filter:hue-rotate(15deg)}
}

/* ---------- SVG Filters ---------- */
.svg-filters{position:absolute;width:0;height:0;overflow:hidden}

/* ---------- Utility ---------- */
.text-gradient{
    background:linear-gradient(135deg, var(--ios-blue), var(--ios-teal));
    -webkit-background-clip:text;-webkit-text-fill-color:transparent;
    background-clip:text;
}
.mono{font-family:'SF Mono','Fira Code','JetBrains Mono','Cascadia Code',monospace}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- App Shell ---------- */
.app-shell{
    display:flex;
    height:100vh;
    overflow:hidden;
    min-height:100dvh;
    background:var(--bg-base);
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar{
    width:var(--sidebar-w);
    min-width:var(--sidebar-w);
    height:100vh;
    display:flex;
    flex-direction:column;
    background:rgba(28,28,30,0.75);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border-right:1px solid var(--glass-border);
    z-index:100;
    transition:transform .35s cubic-bezier(.4,0,.2,1);
}

.sidebar-header{
    padding:20px 16px 12px;
    flex-shrink:0;
}

.sidebar-logo{
    display:flex;align-items:center;gap:10px;
    margin-bottom:16px;
    padding:0 4px;
}
.sidebar-logo-icon{
    width:32px;height:32px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--ios-blue),var(--ios-teal));
    border-radius:8px;
    color:#fff;
}
.sidebar-title{
    font-size:17px;font-weight:700;letter-spacing:-0.3px;
}

/* Search */
.sidebar-search{
    position:relative;
}
.search-icon{
    position:absolute;left:10px;top:50%;transform:translateY(-50%);
    color:var(--text-3);pointer-events:none;
}
.search-input{
    width:100%;
    padding:8px 12px 8px 34px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:10px;
    font-size:13px;
    color:var(--text-1);
    outline:none;
    transition:all .2s;
}
.search-input::placeholder{color:var(--text-3)}
.search-input:focus{
    background:rgba(255,255,255,0.09);
    border-color:rgba(0,122,255,0.4);
    box-shadow:0 0 0 3px rgba(0,122,255,0.12);
}

/* Nav */
.sidebar-nav{
    flex:1;
    min-height:0;
    overflow-y:auto;
    padding:4px 12px 20px;
}
.sidebar-nav::-webkit-scrollbar{width:4px}
.sidebar-nav::-webkit-scrollbar-track{background:transparent}
.sidebar-nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:2px}

.nav-category{
    margin-bottom:4px;
}
.nav-category-label{
    font-size:11px;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.8px;
    color:var(--text-3);
    padding:16px 12px 6px;
}
.nav-item{
    display:flex;align-items:center;gap:10px;
    padding:8px 12px;
    border-radius:10px;
    font-size:13px;
    font-weight:500;
    color:var(--text-2);
    cursor:pointer;
    transition:all .2s;
    margin-bottom:1px;
}
.nav-item:hover{
    background:rgba(255,255,255,0.06);
    color:var(--text-1);
}
.nav-item.active{
    background:rgba(0,122,255,0.18);
    color:#fff;
}
.nav-item-icon{
    width:28px;height:28px;
    display:flex;align-items:center;justify-content:center;
    border-radius:7px;
    flex-shrink:0;
}
.nav-item-icon svg{width:16px;height:16px}

/* Icon color classes */
.icon-blue    .nav-item-icon{background:rgba(0,122,255,0.15);color:var(--ios-blue)}
.icon-green   .nav-item-icon{background:rgba(48,209,88,0.15);color:var(--ios-green)}
.icon-orange  .nav-item-icon{background:rgba(255,159,10,0.15);color:var(--ios-orange)}
.icon-red     .nav-item-icon{background:rgba(255,69,58,0.15);color:var(--ios-red)}
.icon-purple  .nav-item-icon{background:rgba(191,90,242,0.15);color:var(--ios-purple)}
.icon-pink    .nav-item-icon{background:rgba(255,55,95,0.15);color:var(--ios-pink)}
.icon-teal    .nav-item-icon{background:rgba(100,210,255,0.15);color:var(--ios-teal)}
.icon-yellow  .nav-item-icon{background:rgba(255,214,10,0.15);color:var(--ios-yellow)}
.icon-indigo  .nav-item-icon{background:rgba(94,92,230,0.15);color:var(--ios-indigo)}
.icon-mint    .nav-item-icon{background:rgba(102,212,207,0.15);color:var(--ios-mint)}

.nav-item.active .nav-item-icon{
    background:rgba(255,255,255,0.15);color:#fff;
}

/* ============================================================
   MAIN CONTENT
   ============================================================ */
.main-col{
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
    min-width:0;
    overflow:hidden;
}
.main-content{
    flex:1;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    padding:0;
    position:relative;
    background:transparent;
}
.main-content::-webkit-scrollbar{width:6px}
.main-content::-webkit-scrollbar-track{background:transparent}
.main-content::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.08);border-radius:3px}

/* Tool Page Layout */
.tool-page{
    max-width:960px;
    margin:0 auto;
    padding:32px 40px 60px;
    animation:pageIn .35s ease-out;
}
@keyframes pageIn{
    from{opacity:0;transform:translateY(12px)}
    to{opacity:1;transform:translateY(0)}
}
.tool-page-header{
    margin-bottom:28px;
}
.tool-page-header h1{
    font-size:28px;font-weight:700;letter-spacing:-0.5px;
    margin-bottom:6px;
}
.tool-page-header p{
    font-size:14px;color:var(--text-2);
}

/* ============================================================
   iOS GLASS PANEL
   ============================================================ */
.glass-panel{
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-lg);
    position:relative;
    overflow:hidden;
}
.glass-panel::before{
    content:'';position:absolute;top:0;left:0;right:0;
    height:1px;
    background:var(--glass-top-line);
    z-index:1;
}
.glass-panel-thick{
    background:var(--glass-bg-thick);
}

/* ============================================================
   FORM ELEMENTS — iOS 26 Style
   ============================================================ */
.field-group{margin-bottom:20px}
.field-label{
    display:block;
    font-size:13px;font-weight:600;color:var(--text-2);
    margin-bottom:6px;letter-spacing:-0.1px;
}
.field-input,
.field-textarea,
.field-select{
    width:100%;
    padding:10px 14px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-sm);
    font-size:14px;color:var(--text-1);
    outline:none;
    transition:all .2s;
}
.field-input:focus,
.field-textarea:focus,
.field-select:focus{
    background:rgba(255,255,255,0.07);
    border-color:rgba(0,122,255,0.5);
    box-shadow:0 0 0 3px rgba(0,122,255,0.1);
}
.field-input::placeholder,
.field-textarea::placeholder{color:var(--text-4)}
.field-textarea{resize:vertical;min-height:80px;line-height:1.6}
.field-select{cursor:pointer;-webkit-appearance:none;appearance:none;
    background:#2C2C2E url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    padding-right:32px;
}
.field-select option{background:#2C2C2E;color:#fff}

/* Range Slider */
.field-range{
    -webkit-appearance:none;appearance:none;
    width:100%;height:4px;
    background:rgba(255,255,255,0.10);
    border-radius:2px;outline:none;
}
.field-range::-webkit-slider-thumb{
    -webkit-appearance:none;
    width:20px;height:20px;
    border-radius:50%;
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,0.4),0 0 0 1px rgba(255,255,255,0.1);
    cursor:pointer;
}

/* Checkbox / Toggle */
.toggle-row{
    display:flex;align-items:center;justify-content:space-between;
    padding:8px 0;
}
.toggle-label{font-size:14px;color:var(--text-2)}
.toggle-switch{
    position:relative;width:44px;height:26px;
}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
    position:absolute;inset:0;
    background:rgba(255,255,255,0.12);
    border-radius:13px;cursor:pointer;
    transition:.3s;
}
.toggle-slider::before{
    content:'';position:absolute;
    left:2px;top:2px;width:22px;height:22px;
    background:#fff;border-radius:50%;
    box-shadow:0 1px 3px rgba(0,0,0,0.3);
    transition:.3s;
}
.toggle-switch input:checked + .toggle-slider{background:var(--ios-green)}
.toggle-switch input:checked + .toggle-slider::before{transform:translateX(18px)}

/* ============================================================
   BUTTONS — iOS 26 Pill Style
   ============================================================ */
.btn{
    display:inline-flex;align-items:center;justify-content:center;gap:6px;
    padding:8px 18px;
    border-radius:var(--radius-pill);
    font-size:13px;font-weight:600;
    transition:all .2s;
    white-space:nowrap;
    position:relative;overflow:hidden;
    letter-spacing:-0.1px;
}
.btn svg{width:15px;height:15px;flex-shrink:0}

.btn-primary{
    background:var(--ios-blue);color:#fff;
}
.btn-primary:hover{background:#0A84FF;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,122,255,0.3)}
.btn-primary:active{transform:translateY(0)}

.btn-glass{
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.10);
    color:var(--text-2);
}
.btn-glass:hover{background:rgba(255,255,255,0.12);color:var(--text-1)}

.btn-green{background:var(--ios-green);color:#fff}
.btn-green:hover{opacity:.9}
.btn-red{background:var(--ios-red);color:#fff}
.btn-red:hover{opacity:.9}
.btn-orange{background:var(--ios-orange);color:#fff}
.btn-orange:hover{opacity:.9}

.btn-sm{padding:6px 14px;font-size:12px}
.btn-lg{padding:12px 28px;font-size:15px}

/* Button group */
.btn-group{display:flex;gap:6px;flex-wrap:wrap}

/* ============================================================
   TOOLBAR — Glass Bar
   ============================================================ */
.toolbar{
    display:flex;align-items:center;gap:6px;
    padding:8px 12px;
    background:var(--glass-bg);
    backdrop-filter:var(--glass-blur);
    -webkit-backdrop-filter:var(--glass-blur);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    flex-wrap:wrap;
    position:relative;overflow:hidden;
    margin-bottom:16px;
}
.toolbar::before{
    content:'';position:absolute;top:0;left:0;right:0;
    height:1px;background:var(--glass-top-line);
}
.toolbar-divider{
    width:1px;height:20px;background:rgba(255,255,255,0.08);margin:0 4px;
}
.toolbar-spacer{flex:1}

/* ============================================================
   SPLIT PANELS — Side by side editors
   ============================================================ */
.split-panels{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
    min-height:420px;
}
.split-panel{
    display:flex;flex-direction:column;
    border-radius:var(--radius-lg);
    background:var(--glass-bg);
    backdrop-filter:blur(20px) saturate(150%);
    -webkit-backdrop-filter:blur(20px) saturate(150%);
    border:1px solid var(--glass-border);
    overflow:hidden;position:relative;
}
.split-panel::before{
    content:'';position:absolute;top:0;left:0;right:0;
    height:1px;background:var(--glass-top-line);z-index:1;
}
.panel-head{
    display:flex;align-items:center;justify-content:space-between;
    padding:10px 16px;
    border-bottom:1px solid rgba(255,255,255,0.05);
    flex-shrink:0;
}
.panel-title{font-size:12px;font-weight:600;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px}
.panel-badge{
    font-size:11px;padding:2px 10px;
    border-radius:var(--radius-pill);
    font-weight:600;
}
.badge-ok{background:rgba(48,209,88,0.12);color:var(--ios-green)}
.badge-err{background:rgba(255,69,58,0.12);color:var(--ios-red)}
.badge-info{background:rgba(0,122,255,0.12);color:var(--ios-blue)}
.badge-neutral{background:rgba(255,255,255,0.06);color:var(--text-3)}

.panel-body{flex:1;overflow:auto;padding:0}
.panel-body textarea{
    width:100%;height:100%;
    padding:14px 16px;
    background:transparent;border:none;
    color:var(--text-1);
    font-family:'SF Mono','Fira Code','JetBrains Mono',monospace;
    font-size:13px;line-height:1.7;
    resize:none;outline:none;
    tab-size:2;
}
.panel-body textarea::placeholder{color:var(--text-4)}
.panel-body pre{
    padding:14px 16px;
    font-family:'SF Mono','Fira Code','JetBrains Mono',monospace;
    font-size:13px;line-height:1.7;
    white-space:pre-wrap;word-break:break-all;
    margin:0;
}
.panel-foot{
    display:flex;align-items:center;gap:16px;
    padding:8px 16px;
    font-size:11px;color:var(--text-3);
    border-top:1px solid rgba(255,255,255,0.05);
    flex-shrink:0;
}
.panel-foot strong{color:var(--text-2)}

/* ============================================================
   DROP ZONE
   ============================================================ */
.drop-zone{
    border:2px dashed rgba(255,255,255,0.12);
    border-radius:var(--radius-xl);
    padding:48px 28px;
    text-align:center;cursor:pointer;
    transition:all .3s;
    background:rgba(255,255,255,0.02);
}
.drop-zone:hover,.drop-zone.drag-over{
    border-color:rgba(0,122,255,0.4);
    background:rgba(0,122,255,0.04);
}
.drop-zone-icon{font-size:40px;margin-bottom:12px;opacity:.7}
.drop-zone-text{font-size:15px;color:var(--text-2)}
.drop-zone-text strong{color:var(--ios-blue)}
.drop-zone-hint{font-size:12px;color:var(--text-3);margin-top:6px}

/* ============================================================
   RESULTS / DATA DISPLAY
   ============================================================ */
.result-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(200px, 1fr));
    gap:10px;
}
.result-card{
    padding:14px 16px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.06);
    border-radius:var(--radius-sm);
}
.result-label{font-size:11px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px}
.result-value{font-size:15px;font-weight:600;word-break:break-all}

/* List items */
.list-item{
    display:flex;align-items:center;gap:12px;
    padding:12px 16px;
    border-bottom:1px solid rgba(255,255,255,0.04);
    transition:background .2s;
}
.list-item:last-child{border-bottom:none}
.list-item:hover{background:rgba(255,255,255,0.03)}

/* Code block */
.code-block{
    padding:14px 16px;
    background:rgba(0,0,0,0.3);
    border-radius:var(--radius-sm);
    font-family:'SF Mono',monospace;
    font-size:13px;line-height:1.6;
    overflow-x:auto;
    white-space:pre-wrap;
    word-break:break-all;
    position:relative;
}
.code-block .copy-btn{
    position:absolute;top:8px;right:8px;
    padding:4px 10px;font-size:11px;
    background:rgba(255,255,255,0.08);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:6px;color:var(--text-3);
    cursor:pointer;transition:all .2s;
}
.code-block .copy-btn:hover{background:rgba(255,255,255,0.15);color:var(--text-1)}

/* ============================================================
   SEGMENTED CONTROL — iOS Style
   ============================================================ */
.segmented{
    display:inline-flex;
    padding:3px;
    background:rgba(255,255,255,0.06);
    border-radius:var(--radius-sm);
    border:1px solid rgba(255,255,255,0.04);
    gap:2px;
}
.seg-btn{
    padding:6px 16px;
    border-radius:9px;
    font-size:12px;font-weight:500;
    color:var(--text-3);
    transition:all .25s;
}
.seg-btn:hover{color:var(--text-2)}
.seg-btn.active{
    background:rgba(255,255,255,0.12);
    color:var(--text-1);
    box-shadow:0 1px 4px rgba(0,0,0,0.2);
}

/* ============================================================
   COLOR PICKER
   ============================================================ */
.color-input-wrap{
    display:flex;align-items:center;gap:10px;
    padding:6px 10px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-sm);
}
.color-swatch{
    width:32px;height:32px;
    border:none;border-radius:8px;
    cursor:pointer;background:none;padding:0;
}
.color-swatch::-webkit-color-swatch-wrapper{padding:0}
.color-swatch::-webkit-color-swatch{border:2px solid rgba(255,255,255,0.15);border-radius:8px}
.color-hex-label{font-size:13px;font-family:'SF Mono',monospace;color:var(--text-2)}

/* ============================================================
   TABS
   ============================================================ */
.tabs{
    display:flex;gap:2px;
    padding:3px;
    background:rgba(255,255,255,0.04);
    border-radius:var(--radius-sm);
    margin-bottom:20px;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab-btn{
    flex:1 0 auto;
    padding:8px 12px;
    border-radius:9px;
    white-space:nowrap;
    font-size:13px;font-weight:500;
    color:var(--text-3);
    text-align:center;
    transition:all .25s;
}
.tab-btn:hover{color:var(--text-2)}
.tab-btn.active{
    background:rgba(255,255,255,0.10);
    color:var(--text-1);
    box-shadow:0 1px 6px rgba(0,0,0,0.2);
}

/* ============================================================
   SYNTAX HIGHLIGHT
   ============================================================ */
.hl-key{color:#FF79C6}
.hl-string{color:#50FA7B}
.hl-number{color:#BD93F9}
.hl-bool{color:#FFB86C}
.hl-null{color:#8BE9FD}
.hl-bracket{color:rgba(255,255,255,0.4)}
.hl-tag{color:#FF79C6}
.hl-attr{color:#50FA7B}
.hl-added{color:var(--ios-green);background:rgba(48,209,88,0.08)}
.hl-removed{color:var(--ios-red);background:rgba(255,69,58,0.08)}

/* ============================================================
   FILE ITEM — For image compressor etc.
   ============================================================ */
.file-item{
    display:flex;align-items:center;gap:14px;
    padding:12px 16px;
    background:rgba(255,255,255,0.03);
    border:1px solid rgba(255,255,255,0.05);
    border-radius:var(--radius-md);
    transition:background .2s;
    margin-bottom:8px;
}
.file-thumb{
    width:44px;height:44px;
    border-radius:10px;
    object-fit:cover;
    border:1px solid rgba(255,255,255,0.08);
    flex-shrink:0;
}
.file-info{flex:1;min-width:0}
.file-name{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.file-meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--text-3);margin-top:2px}
.file-savings{
    padding:2px 8px;border-radius:var(--radius-pill);
    font-size:11px;font-weight:700;
    background:rgba(48,209,88,0.12);color:var(--ios-green);
}
.file-progress{width:100%;height:2px;background:rgba(255,255,255,0.06);border-radius:1px;margin-top:6px}
.file-progress-bar{height:100%;background:linear-gradient(90deg,var(--ios-blue),var(--ios-teal));border-radius:1px;transition:width .3s}

/* ============================================================
   SUMMARY BAR
   ============================================================ */
.summary-bar{
    display:flex;align-items:center;justify-content:center;gap:20px;
    padding:16px 20px;
    background:rgba(48,209,88,0.05);
    border:1px solid rgba(48,209,88,0.12);
    border-radius:var(--radius-md);
}
.summary-item{text-align:center}
.summary-value{font-size:20px;font-weight:800;letter-spacing:-.5px}
.summary-value.green{color:var(--ios-green)}
.summary-label{font-size:10px;color:var(--text-3);text-transform:uppercase;letter-spacing:.5px;margin-top:2px}
.summary-divider{width:1px;height:36px;background:rgba(255,255,255,0.06)}

/* ============================================================
   QR CODE PREVIEW
   ============================================================ */
.qr-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
.qr-preview{
    position:sticky;top:20px;
    text-align:center;
    padding:24px;
}
.qr-canvas-wrap{
    display:inline-block;
    background:#fff;
    padding:16px;
    border-radius:var(--radius-md);
    box-shadow:0 8px 32px rgba(0,0,0,0.3);
    margin-bottom:20px;
}
.qr-canvas-wrap canvas{display:block;max-width:100%;height:auto}

/* ============================================================
   WELCOME SCREEN
   ============================================================ */
.welcome{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    min-height:100%;text-align:center;padding:40px;
    animation:pageIn .5s ease-out;
}
.welcome-icon{
    width:80px;height:80px;
    display:flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--ios-blue),var(--ios-teal));
    border-radius:22px;
    margin-bottom:24px;
    box-shadow:0 12px 40px rgba(0,122,255,0.25);
}
.welcome-icon svg{width:40px;height:40px;color:#fff}
.welcome h2{font-size:26px;font-weight:700;letter-spacing:-.5px;margin-bottom:8px}
.welcome p{font-size:15px;color:var(--text-2);max-width:400px;margin:0 auto 32px}

.welcome-stats{
    display:flex;gap:12px;margin-bottom:32px;
}
.welcome-stat{
    padding:8px 20px;
    background:var(--glass-bg);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-pill);
    font-size:12px;font-weight:600;color:var(--text-2);
}

.welcome-grid{
    display:grid;grid-template-columns:repeat(3,1fr);
    gap:12px;max-width:600px;width:100%;
    margin-bottom:8px;
}
.welcome-card{
    padding:20px 16px;
    background:var(--glass-bg);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid var(--glass-border);
    border-radius:var(--radius-md);
    text-align:center;
    cursor:pointer;
    transition:all .3s;
    position:relative;overflow:hidden;
}
.welcome-card::before{
    content:'';position:absolute;top:0;left:0;right:0;
    height:1px;background:var(--glass-top-line);
}
.welcome-card:hover{
    background:var(--glass-bg-hover);
    transform:translateY(-4px);
    box-shadow:0 8px 32px rgba(0,0,0,0.2);
}
.welcome-card-icon{font-size:28px;margin-bottom:10px;display:block}
.welcome-card h4{font-size:13px;font-weight:600;margin-bottom:4px}
.welcome-card p{font-size:11px;color:var(--text-3);margin:0}

/* ============================================================
   PASSWORD DISPLAY
   ============================================================ */
.password-display{
    padding:16px 20px;
    background:rgba(0,0,0,0.3);
    border-radius:var(--radius-sm);
    font-family:'SF Mono',monospace;
    font-size:18px;
    font-weight:600;
    letter-spacing:1px;
    text-align:center;
    word-break:break-all;
    margin-bottom:16px;
    min-height:56px;
    display:flex;align-items:center;justify-content:center;
}

/* Strength bar */
.strength-bar{
    height:4px;border-radius:2px;
    background:rgba(255,255,255,0.06);
    margin-bottom:12px;overflow:hidden;
}
.strength-fill{height:100%;border-radius:2px;transition:width .3s,background .3s}

/* ============================================================
   DIFF VIEW
   ============================================================ */
.diff-line{padding:2px 12px;font-family:'SF Mono',monospace;font-size:13px;line-height:1.7}
.diff-line.added{background:rgba(48,209,88,0.08);color:var(--ios-green)}
.diff-line.removed{background:rgba(255,69,58,0.08);color:var(--ios-red)}
.diff-line.same{color:var(--text-3)}

/* ============================================================
   CALCULATOR
   ============================================================ */
.calc-display{
    padding:20px;
    background:rgba(0,0,0,0.3);
    border-radius:var(--radius-md) var(--radius-md) 0 0;
    font-family:'SF Mono',monospace;
    max-height:300px;
    overflow-y:auto;
}
.calc-line{padding:2px 0;font-size:13px;line-height:1.6}
.calc-prompt{color:var(--ios-green)}
.calc-result{color:var(--ios-teal)}
.calc-error{color:var(--ios-red)}
.calc-input-row{display:flex;gap:8px}
.calc-input{
    flex:1;
    padding:12px 16px;
    background:rgba(255,255,255,0.05);
    border:1px solid rgba(255,255,255,0.08);
    border-radius:var(--radius-sm);
    font-family:'SF Mono',monospace;
    font-size:14px;color:var(--text-1);
    outline:none;
}
.calc-input:focus{border-color:rgba(0,122,255,0.5)}

/* ============================================================
   MOBILE
   ============================================================ */
.mobile-toggle{
    display:none;
    position:fixed;top:12px;left:12px;z-index:9999;
    width:44px;height:44px;
    align-items:center;justify-content:center;
    background:rgba(28,28,30,0.85);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    border:1px solid rgba(255,255,255,0.1);
    border-radius:12px;
    color:var(--text-2);
    cursor:pointer;
    pointer-events:auto;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
}

.mobile-backdrop{
    display:none;
}

@media(max-width:768px){
    .mobile-toggle{display:flex}
    .app-shell{
        overflow:visible;
        min-height:100dvh;
    }
    .mobile-backdrop{
        position:fixed;
        inset:0;
        z-index:250;
        background:rgba(6,8,12,0.56);
        opacity:0;
        pointer-events:none;
        transition:opacity .25s ease;
        backdrop-filter:blur(2px);
        -webkit-backdrop-filter:blur(2px);
    }
    .sidebar{
        position:fixed;top:0;left:0;bottom:0;
        height:100dvh;
        width:min(320px, calc(100vw - 52px));
        min-width:min(320px, calc(100vw - 52px));
        padding-top:env(safe-area-inset-top);
        padding-bottom:env(safe-area-inset-bottom);
        transform:translateX(-100%);
        z-index:300;
        box-shadow:none;
        backdrop-filter:none;
        -webkit-backdrop-filter:none;
        background:#101114;
        border-right:1px solid rgba(255,255,255,0.08);
    }
    .sidebar.open{transform:translateX(0)}
    body.sidebar-open .mobile-backdrop{
        display:block;
        opacity:1;
        pointer-events:auto;
    }
    body.sidebar-open .mobile-toggle{
        opacity:0;
        pointer-events:none;
        transform:translateX(-8px) scale(0.96);
    }
    .mobile-toggle{
        top:calc(env(safe-area-inset-top) + 12px);
        left:calc(env(safe-area-inset-left) + 12px);
        background:rgba(16,17,20,0.96);
        color:rgba(255,255,255,0.88);
        border-color:rgba(255,255,255,0.12);
        transition:opacity .2s ease, transform .2s ease, background .2s ease, border-color .2s ease;
    }
    .main-content{
        padding-bottom:calc(env(safe-area-inset-bottom) + 8px);
    }
    body::before{
        background:var(--bg-base);
        animation:none;
    }
    .sidebar-footer{
        position:sticky;
        bottom:0;
        z-index:2;
        padding-bottom:calc(env(safe-area-inset-bottom) + 2px);
        border-top:1px solid rgba(255,255,255,0.06);
        box-shadow:0 -10px 24px rgba(0,0,0,0.22);
    }
    .tool-page{
        padding:calc(env(safe-area-inset-top) + 60px) 12px calc(env(safe-area-inset-bottom) + 60px);
    }
    .welcome{
        justify-content:flex-start;
        padding:calc(env(safe-area-inset-top) + 72px) 24px calc(env(safe-area-inset-bottom) + 28px);
    }
    .split-panels{grid-template-columns:1fr;min-height:auto}
    .split-panel{min-height:280px}
    .qr-layout{grid-template-columns:1fr}
    .welcome-grid{grid-template-columns:1fr}
    .result-grid{grid-template-columns:1fr}
    .summary-bar{flex-wrap:wrap}

    /* Force all inline two-column grids to single column on mobile */
    #toolRoot [style*="grid-template-columns"]{
        grid-template-columns:1fr !important;
    }

    /* Toolbar wrapping */
    .toolbar{flex-wrap:wrap;gap:8px}

    /* Segmented controls */
    .segmented{flex-wrap:wrap}
    .seg-btn{font-size:12px;padding:6px 10px}

    /* Tabs: prevent vertical text, ensure horizontal scroll */
    .tabs{flex-wrap:nowrap}
    .tab-btn{flex:0 0 auto;font-size:12px;padding:6px 10px}

    /* Tables scroll horizontally */
    #toolRoot table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}

    /* Canvas max width */
    #toolRoot canvas{max-width:100%}

    /* Field groups tighter */
    .field-group{margin-bottom:12px}
    .field-label{font-size:12px}

    /* Text escape buttons wrap */
    .btn-group{flex-wrap:wrap}
}

/* ============================================================
   SETTINGS PANEL (bottom of sidebar)
   ============================================================ */
.sidebar-footer{
    margin-top:auto;
    flex-shrink:0;
    position:relative;
    background:inherit;
}
.settings-section{
    margin-bottom:16px;
}
.settings-label{
    font-size:10px;font-weight:600;
    text-transform:uppercase;letter-spacing:.8px;
    color:var(--text-3);
    margin-bottom:8px;
    padding:0 4px;
}
/* Theme swatches */
.theme-grid{
    display:flex;flex-wrap:wrap;gap:6px;
    padding:0 4px;
}
.theme-swatch{
    width:22px;height:22px;
    border-radius:50%;
    cursor:pointer;
    border:2px solid transparent;
    transition:all .2s;
    position:relative;
}
.theme-swatch:hover{
    transform:scale(1.15);
}
.theme-swatch.active{
    border-color:#fff;
    box-shadow:0 0 0 2px rgba(255,255,255,0.2);
}
.theme-swatch.active::after{
    content:'✓';
    position:absolute;inset:0;
    display:flex;align-items:center;justify-content:center;
    font-size:10px;font-weight:700;color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
/* Lang selector */
.lang-pills{
    display:flex;gap:4px;
    padding:0 4px;
}
.lang-pill{
    padding:4px 12px;
    border-radius:var(--radius-pill);
    font-size:11px;font-weight:500;
    color:var(--text-3);
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.04);
    cursor:pointer;
    transition:all .2s;
}
.lang-pill:hover{color:var(--text-2)}
.lang-pill.active{
    background:rgba(255,255,255,0.10);
    color:var(--text-1);
    border-color:rgba(255,255,255,0.1);
}

/* Appearance pills */
.appear-pills{
    display:flex;gap:4px;
    padding:0 4px;
}
.appear-pill{
    padding:4px 12px;
    border-radius:var(--radius-pill);
    font-size:11px;font-weight:500;
    color:var(--text-3);
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.04);
    cursor:pointer;
    transition:all .2s;
}
.appear-pill:hover{color:var(--text-2)}
.appear-pill.active{
    background:rgba(255,255,255,0.10);
    color:var(--text-1);
    border-color:rgba(255,255,255,0.1);
}

/* ============================================================
   LIGHT MODE OVERRIDES
   ============================================================ */
[data-appearance="light"] body::before{
    background:
        radial-gradient(ellipse 80% 60% at 15% 20%, var(--theme-glow), transparent),
        radial-gradient(ellipse 60% 80% at 85% 30%, rgba(191,90,242,0.05), transparent),
        radial-gradient(ellipse 70% 50% at 50% 85%, rgba(48,209,88,0.03), transparent),
        var(--bg-base);
}

[data-appearance="light"] .sidebar{
    background:rgba(255,255,255,0.72);
    border-right-color:rgba(0,0,0,0.08);
}

[data-appearance="light"] .search-input{
    background:rgba(0,0,0,0.04);
    border-color:rgba(0,0,0,0.06);
}
[data-appearance="light"] .search-input:focus{
    background:rgba(0,0,0,0.03);
    border-color:rgba(0,122,255,0.4);
}

[data-appearance="light"] .sidebar-nav::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08)}
[data-appearance="light"] .main-content::-webkit-scrollbar-thumb{background:rgba(0,0,0,0.08)}

[data-appearance="light"] .nav-item:hover{
    background:rgba(0,0,0,0.04);
}
[data-appearance="light"] .nav-item.active{
    background:rgba(0,122,255,0.12);
    color:var(--theme-accent);
}
[data-appearance="light"] .nav-item.active .nav-item-icon{
    background:rgba(0,122,255,0.15);color:var(--theme-accent);
}

[data-appearance="light"] .field-input,
[data-appearance="light"] .field-input,
[data-appearance="light"] .field-textarea{
    background:rgba(0,0,0,0.03);
    border-color:rgba(0,0,0,0.10);
}
[data-appearance="light"] .field-select{
    background:#FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.35)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center;
    border-color:rgba(0,0,0,0.12);
}
[data-appearance="light"] .field-input:focus,
[data-appearance="light"] .field-textarea:focus{
    background:rgba(0,0,0,0.02);
}
[data-appearance="light"] .field-select:focus{
    background-color:#FFFFFF;
    border-color:rgba(0,122,255,0.5);
}
[data-appearance="light"] .field-select option{background:#fff;color:#1C1C1E}
[data-appearance="light"] .field-range{background:rgba(0,0,0,0.08)}
[data-appearance="light"] .field-range::-webkit-slider-thumb{
    background:#fff;
    box-shadow:0 1px 4px rgba(0,0,0,0.15),0 0 0 1px rgba(0,0,0,0.05);
}
[data-appearance="light"] .toggle-slider{background:rgba(0,0,0,0.10)}

[data-appearance="light"] .btn-glass{
    background:rgba(0,0,0,0.05);
    border-color:rgba(0,0,0,0.08);
}
[data-appearance="light"] .btn-glass:hover{
    background:rgba(0,0,0,0.08);
}

[data-appearance="light"] .toolbar{
    background:rgba(255,255,255,0.72);
    border-color:rgba(0,0,0,0.06);
}
[data-appearance="light"] .toolbar-divider{background:rgba(0,0,0,0.08)}

[data-appearance="light"] .split-panel{
    background:rgba(255,255,255,0.72);
    border-color:rgba(0,0,0,0.06);
}
[data-appearance="light"] .panel-head{border-bottom-color:rgba(0,0,0,0.05)}
[data-appearance="light"] .panel-foot{border-top-color:rgba(0,0,0,0.05)}
[data-appearance="light"] .badge-neutral{background:rgba(0,0,0,0.05)}

[data-appearance="light"] .drop-zone{
    border-color:rgba(0,0,0,0.12);
    background:rgba(0,0,0,0.02);
}
[data-appearance="light"] .drop-zone:hover,
[data-appearance="light"] .drop-zone.drag-over{
    border-color:rgba(0,122,255,0.4);
    background:rgba(0,122,255,0.04);
}

[data-appearance="light"] .result-card{
    background:rgba(0,0,0,0.02);
    border-color:rgba(0,0,0,0.06);
}
[data-appearance="light"] .list-item{border-bottom-color:rgba(0,0,0,0.04)}
[data-appearance="light"] .list-item:hover{background:rgba(0,0,0,0.02)}

[data-appearance="light"] .code-block{
    background:rgba(0,0,0,0.04);
}
[data-appearance="light"] .code-block .copy-btn{
    background:rgba(0,0,0,0.06);
    border-color:rgba(0,0,0,0.08);
}

[data-appearance="light"] .segmented{
    background:rgba(0,0,0,0.04);
    border-color:rgba(0,0,0,0.04);
}
[data-appearance="light"] .seg-btn.active{
    background:rgba(255,255,255,0.9);
    box-shadow:0 1px 4px rgba(0,0,0,0.08);
}

[data-appearance="light"] .tabs{background:rgba(0,0,0,0.03)}
[data-appearance="light"] .tab-btn.active{
    background:rgba(255,255,255,0.9);
    box-shadow:0 1px 4px rgba(0,0,0,0.08);
}

/* Syntax highlight — light */
[data-appearance="light"] .hl-key{color:#D63384}
[data-appearance="light"] .hl-string{color:#198754}
[data-appearance="light"] .hl-number{color:#6F42C1}
[data-appearance="light"] .hl-bool{color:#E67700}
[data-appearance="light"] .hl-null{color:#0DCAF0}

[data-appearance="light"] .file-item{
    background:rgba(0,0,0,0.02);
    border-color:rgba(0,0,0,0.06);
}
[data-appearance="light"] .file-thumb{border-color:rgba(0,0,0,0.08)}
[data-appearance="light"] .file-progress{background:rgba(0,0,0,0.06)}

[data-appearance="light"] .summary-bar{
    background:rgba(48,209,88,0.06);
    border-color:rgba(48,209,88,0.15);
}
[data-appearance="light"] .summary-divider{background:rgba(0,0,0,0.06)}

[data-appearance="light"] .qr-canvas-wrap{
    box-shadow:0 8px 32px rgba(0,0,0,0.08);
}

[data-appearance="light"] .welcome-stat{
    background:rgba(255,255,255,0.72);
    border-color:rgba(0,0,0,0.06);
}
[data-appearance="light"] .welcome-card{
    background:rgba(255,255,255,0.72);
    border-color:rgba(0,0,0,0.06);
}
[data-appearance="light"] .welcome-card:hover{
    background:rgba(255,255,255,0.9);
    box-shadow:0 8px 32px rgba(0,0,0,0.08);
}

[data-appearance="light"] .password-display{
    background:rgba(0,0,0,0.04);
}
[data-appearance="light"] .strength-bar{background:rgba(0,0,0,0.06)}

[data-appearance="light"] .calc-display{
    background:rgba(0,0,0,0.04);
}
[data-appearance="light"] .calc-input{
    background:rgba(0,0,0,0.03);
    border-color:rgba(0,0,0,0.08);
}

[data-appearance="light"] .mobile-toggle{
    background:rgba(255,255,255,0.8);
    border-color:rgba(0,0,0,0.08);
}

[data-appearance="light"] .sidebar-footer{}
[data-appearance="light"] .theme-swatch.active{
    border-color:#333;
    box-shadow:0 0 0 2px rgba(0,0,0,0.15);
}
[data-appearance="light"] .theme-swatch.active::after{
    color:#fff;
    text-shadow:0 1px 2px rgba(0,0,0,0.5);
}
[data-appearance="light"] .lang-pill,
[data-appearance="light"] .appear-pill{
    background:rgba(0,0,0,0.04);
    border-color:rgba(0,0,0,0.04);
}
[data-appearance="light"] .lang-pill.active,
[data-appearance="light"] .appear-pill.active{
    background:rgba(0,0,0,0.08);
    border-color:rgba(0,0,0,0.08);
}

[data-appearance="light"] .color-input-wrap{
    background:rgba(0,0,0,0.03);
    border-color:rgba(0,0,0,0.08);
}
[data-appearance="light"] .color-swatch::-webkit-color-swatch{border-color:rgba(0,0,0,0.12)}

/* ---------- Ad Frames — Skeuomorphic Picture Frames ---------- */

/* ── Header row: title left, frames right ── */
.tool-page-header-row{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:20px;
    margin-bottom:28px;
}
.tool-page-header-row .tool-page-header{
    flex-shrink:0;
    margin-bottom:0;
}
.ad-frame-row{
    display:flex;
    gap:10px;
    flex-shrink:1;
    align-items:flex-start;
    padding-top:4px;
    overflow:hidden;
}

/* ── Shared screw style ── */
.ad-frame-mini-screw{
    position:absolute;
    width:6px;height:6px;
    border-radius:50%;
    background:
        radial-gradient(circle at 35% 35%,
            rgba(200,195,185,0.35),
            rgba(120,115,108,0.25) 50%,
            rgba(80,76,70,0.30));
    box-shadow:
        inset 0 0.5px 0 rgba(255,255,255,0.20),
        0 1px 2px rgba(0,0,0,0.25);
    z-index:2;
}
.ad-frame-mini-screw::after{
    content:'';position:absolute;
    top:50%;left:50%;
    width:4px;height:0.6px;
    background:rgba(0,0,0,0.25);
    transform:translate(-50%,-50%) rotate(30deg);
    border-radius:1px;
}
.ad-frame-mini-screw.tl{top:4px;left:4px}
.ad-frame-mini-screw.tr{top:4px;right:4px}
.ad-frame-mini-screw.bl{bottom:4px;left:4px}
.ad-frame-mini-screw.br{bottom:4px;right:4px}

/* ── Mini frames (title-side) ── */
.ad-frame-mini{position:relative}
/* Hanging nail */
.ad-frame-mini::before{
    content:'';position:absolute;
    left:50%;top:-4px;transform:translateX(-50%);
    width:4px;height:4px;border-radius:50%;
    background:radial-gradient(circle at 40% 35%, rgba(180,175,168,0.5), rgba(100,96,90,0.4));
    box-shadow:0 1px 2px rgba(0,0,0,0.3);
    z-index:3;
}
.ad-frame-mini-outer{
    position:relative;
    background:
        linear-gradient(145deg,
            rgba(165,158,145,0.22) 0%,
            rgba(130,124,115,0.18) 30%,
            rgba(150,144,135,0.20) 60%,
            rgba(115,110,102,0.18) 100%);
    border:1px solid rgba(90,85,78,0.35);
    border-radius:4px;
    padding:8px;
    box-shadow:
        0 4px 16px rgba(0,0,0,0.30),
        0 1px 4px rgba(0,0,0,0.20),
        inset 0 1px 0 rgba(255,255,255,0.12),
        inset 0 -1px 0 rgba(0,0,0,0.15);
}
.ad-frame-mini-mat{
    background:linear-gradient(180deg, rgba(240,237,230,0.05) 0%, rgba(225,220,212,0.03) 100%);
    border:1px solid rgba(255,255,255,0.04);
    border-radius:2px;
    padding:4px;
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.18);
    overflow:hidden;
    position:relative;
}
/* Lightbox glow */
.ad-frame-mini-mat::before{
    content:'';position:absolute;inset:0;
    background:radial-gradient(ellipse 90% 80% at 50% 40%, rgba(255,255,255,0.03), transparent);
    pointer-events:none;
}
/* Mock ad content */
.ad-frame-mini-mock{
    width:100px;height:56px;
    border-radius:1px;
    display:flex;flex-direction:column;
    align-items:center;justify-content:center;
    gap:3px;color:#fff;
    position:relative;
}

/* ── Subway Window Ad — Fixed Footer (hidden until ads approved) ── */
.subway-footer{
    display:none;
    flex-shrink:0;
    padding:6px 40px;
    background:var(--bg-base);
    border-top:1px solid rgba(255,255,255,0.06);
    position:relative;
}
.subway-footer .subway-window{
    max-width:880px;
    margin:0 auto;
}
.subway-footer.hidden{display:none}
.subway-close{
    position:absolute;
    top:2px;right:2px;
    z-index:10;
    width:20px;height:20px;
    border-radius:50%;
    background:rgba(255,255,255,0.10);
    color:var(--text-3);
    font-size:14px;line-height:1;
    display:flex;align-items:center;justify-content:center;
    cursor:pointer;
    border:none;
    opacity:0;
    transition:opacity .2s;
}
.subway-window:hover .subway-close{opacity:1}
.subway-close:hover{background:rgba(255,255,255,0.18);color:var(--text-1)}
.subway-window{
    position:relative;
    width:100%;
}
/* Metal window frame */
.subway-window-frame{
    position:relative;
    border-radius:12px;
    padding:6px;
    background:
        linear-gradient(180deg,
            rgba(85,90,100,0.9) 0%,
            rgba(65,70,78,0.95) 15%,
            rgba(75,80,88,0.9) 50%,
            rgba(55,60,68,0.95) 85%,
            rgba(70,75,82,0.9) 100%);
    box-shadow:
        0 6px 24px rgba(0,0,0,0.40),
        0 2px 8px rgba(0,0,0,0.30),
        inset 0 1px 0 rgba(255,255,255,0.15),
        inset 0 -1px 0 rgba(0,0,0,0.30);
    border:1px solid rgba(40,42,48,0.8);
}
/* Rubber seal (inner border) */
.subway-window-frame::before{
    content:'';
    position:absolute;
    inset:5px;
    border-radius:8px;
    border:2px solid rgba(25,25,30,0.6);
    pointer-events:none;
    z-index:2;
}
/* Rivets */
.subway-rivet{
    position:absolute;
    width:8px;height:8px;
    border-radius:50%;
    background:
        radial-gradient(circle at 38% 32%,
            rgba(160,165,175,0.7),
            rgba(90,95,105,0.6) 50%,
            rgba(60,65,72,0.7));
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.25),
        inset 0 -0.5px 0 rgba(0,0,0,0.3),
        0 1px 3px rgba(0,0,0,0.4);
    z-index:3;
}
.subway-rivet::after{
    content:'';position:absolute;
    top:50%;left:50%;
    width:5px;height:1px;
    background:rgba(0,0,0,0.3);
    transform:translate(-50%,-50%) rotate(25deg);
    border-radius:1px;
}
.subway-rivet.tl{top:6px;left:6px}
.subway-rivet.tr{top:6px;right:6px}
.subway-rivet.bl{bottom:6px;left:6px}
.subway-rivet.br{bottom:6px;right:6px}

/* Glass pane */
.subway-glass{
    position:relative;
    border-radius:7px;
    overflow:hidden;
    height:110px;
    background:#0a0c12;
}
/* Outside scene — dark cityscape tint */
.subway-scene{
    position:absolute;
    inset:0;
    background:linear-gradient(180deg, #0d1117 0%, #161b22 60%, #1c2028 100%);
    overflow:hidden;
}
/* Billboard track — scrolling strip */
.subway-billboards{
    display:flex;
    gap:60px;
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    padding:0 40px;
    animation:subway-scroll 45s linear infinite;
}
@keyframes subway-scroll{
    0%{transform:translateY(-50%) translateX(0)}
    100%{transform:translateY(-50%) translateX(-50%)}
}
/* Individual billboard */
.subway-billboard{
    flex-shrink:0;
    width:160px;
    height:80px;
    border-radius:6px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:2px;
    color:#fff;
    box-shadow:
        0 0 20px rgba(255,255,255,0.08),
        0 2px 8px rgba(0,0,0,0.40);
    border:1px solid rgba(255,255,255,0.1);
    position:relative;
}
/* Billboard backlight glow */
.subway-billboard::before{
    content:'';
    position:absolute;
    inset:-8px;
    border-radius:12px;
    background:inherit;
    filter:blur(16px);
    opacity:0.15;
    z-index:-1;
}
.sb-icon{font-size:22px;filter:drop-shadow(0 1px 3px rgba(0,0,0,0.3))}
.sb-text{font-size:12px;font-weight:800;letter-spacing:0.5px;text-shadow:0 1px 4px rgba(0,0,0,0.5)}
.sb-sub{font-size:9px;opacity:0.7;letter-spacing:0.3px}

/* Passing light streaks (tunnel lights) */
.subway-scene::after{
    content:'';
    position:absolute;
    top:0;bottom:0;
    width:200%;
    background:repeating-linear-gradient(
        90deg,
        transparent 0px,
        transparent 280px,
        rgba(255,200,100,0.03) 280px,
        rgba(255,200,100,0.03) 284px
    );
    animation:subway-lights 3s linear infinite;
}
@keyframes subway-lights{
    0%{transform:translateX(0)}
    100%{transform:translateX(-142px)}
}

/* Glass reflection overlay */
.subway-glass-reflection{
    position:absolute;
    inset:0;
    border-radius:7px;
    pointer-events:none;
    z-index:2;
    background:
        /* Top glare */
        linear-gradient(180deg,
            rgba(255,255,255,0.06) 0%,
            transparent 30%),
        /* Diagonal streak */
        linear-gradient(135deg,
            transparent 30%,
            rgba(255,255,255,0.03) 45%,
            transparent 55%),
        /* Bottom tint */
        linear-gradient(0deg,
            rgba(0,0,0,0.10) 0%,
            transparent 20%);
}

/* Window sill — hidden */
.subway-sill{display:none}

/* ── Light mode ── */
[data-appearance="light"] .subway-window-frame{
    background:
        linear-gradient(180deg,
            rgba(195,200,210,0.95) 0%,
            rgba(175,180,190,0.98) 15%,
            rgba(185,190,198,0.95) 50%,
            rgba(170,175,185,0.98) 85%,
            rgba(180,185,195,0.95) 100%);
    border-color:rgba(140,145,155,0.5);
    box-shadow:
        0 6px 24px rgba(0,0,0,0.15),
        0 2px 8px rgba(0,0,0,0.10),
        inset 0 1px 0 rgba(255,255,255,0.50),
        inset 0 -1px 0 rgba(0,0,0,0.12);
}
[data-appearance="light"] .subway-window-frame::before{
    border-color:rgba(100,105,115,0.3);
}
[data-appearance="light"] .subway-rivet{
    background:radial-gradient(circle at 38% 32%, rgba(210,215,225,0.8), rgba(160,165,175,0.7) 50%, rgba(130,135,142,0.8));
    box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), inset 0 -0.5px 0 rgba(0,0,0,0.15), 0 1px 3px rgba(0,0,0,0.15);
}
[data-appearance="light"] .subway-glass{
    background:#e8ecf0;
}
[data-appearance="light"] .subway-scene{
    background:linear-gradient(180deg, #dce3ea 0%, #c8d0d8 60%, #b8c2cc 100%);
}
[data-appearance="light"] .subway-glass-reflection{
    background:
        linear-gradient(180deg, rgba(255,255,255,0.15) 0%, transparent 30%),
        linear-gradient(135deg, transparent 30%, rgba(255,255,255,0.08) 45%, transparent 55%),
        linear-gradient(0deg, rgba(0,0,0,0.04) 0%, transparent 20%);
}
[data-appearance="light"] .subway-sill{
    background:linear-gradient(180deg, rgba(170,175,185,0.9) 0%, rgba(185,190,198,0.85) 100%);
    box-shadow:0 2px 6px rgba(0,0,0,0.10), inset 0 1px 0 rgba(255,255,255,0.30);
}
[data-appearance="light"] .subway-billboard{
    box-shadow:0 0 20px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.10);
}

[data-appearance="light"] .ad-frame-mini-outer{
    background:
        linear-gradient(145deg,
            rgba(210,203,190,0.45) 0%,
            rgba(195,188,178,0.38) 30%,
            rgba(205,198,188,0.42) 60%,
            rgba(188,182,172,0.38) 100%);
    border-color:rgba(160,152,138,0.3);
    box-shadow:
        0 4px 16px rgba(0,0,0,0.10),
        0 1px 4px rgba(0,0,0,0.06),
        inset 0 1px 0 rgba(255,255,255,0.40),
        inset 0 -1px 0 rgba(0,0,0,0.08);
}
[data-appearance="light"] .ad-frame-mini-mat{
    background:linear-gradient(180deg, rgba(255,252,248,0.25) 0%, rgba(248,245,240,0.15) 100%);
    border-color:rgba(0,0,0,0.05);
    box-shadow:inset 0 1px 2px rgba(0,0,0,0.06);
}
[data-appearance="light"] .ad-frame-mini-screw{
    background:radial-gradient(circle at 35% 35%, rgba(215,210,200,0.55), rgba(175,170,162,0.45) 50%, rgba(145,140,133,0.50));
    box-shadow:inset 0 0.5px 0 rgba(255,255,255,0.45), 0 1px 2px rgba(0,0,0,0.08);
}
[data-appearance="light"] .ad-frame-mini::before{
    background:radial-gradient(circle at 40% 35%, rgba(160,155,148,0.6), rgba(120,116,110,0.5));
}

/* ── Mobile ── */
@media(max-width:768px){
    .tool-page-header-row{flex-direction:column}
    .ad-frame-row{display:none}
    .subway-glass{height:90px}
    .subway-billboard{width:120px;height:65px}
    .sb-icon{font-size:18px}
}

/* Legacy */
.ad-slot{margin:16px 0;text-align:center;overflow:hidden}
.ad-slot:empty,.ad-slot:not(:has(iframe)){display:none}

/* ---------- Settings Popover ---------- */
.sidebar-settings-bar{
    flex-shrink:0;
    padding:6px 16px;
    border-top:1px solid rgba(255,255,255,0.06);
    display:flex;
    align-items:center;
    justify-content:flex-start;
    gap:6px;
}
.settings-trigger{
    width:32px;height:32px;
    border-radius:8px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.06);
    color:var(--text-3);
    cursor:pointer;
    display:flex;align-items:center;justify-content:center;
    transition:all .2s;
}
.settings-trigger:hover{
    background:rgba(255,255,255,0.1);
    color:var(--text-1);
}
.settings-trigger.active{
    background:var(--accent);
    color:#fff;
    border-color:var(--accent);
}
.settings-popover{
    display:none;
    position:absolute;
    bottom:52px;
    left:12px;right:12px;
    padding:16px;
    border-radius:16px;
    background:rgba(30,30,32,0.92);
    backdrop-filter:blur(40px) saturate(180%);
    -webkit-backdrop-filter:blur(40px) saturate(180%);
    border:1px solid rgba(255,255,255,0.08);
    box-shadow:0 8px 32px rgba(0,0,0,0.4);
    z-index:100;
    animation:popoverIn .2s ease;
}
.settings-popover.open{display:block}
@keyframes popoverIn{
    from{opacity:0;transform:translateY(8px)}
    to{opacity:1;transform:translateY(0)}
}
.settings-popover .settings-section{margin-bottom:14px}
.settings-popover .settings-section:last-child{margin-bottom:0}

[data-appearance="light"] .sidebar-settings-bar{
    border-top-color:rgba(0,0,0,0.06);
}
[data-appearance="light"] .settings-trigger{
    background:rgba(0,0,0,0.04);
    border-color:rgba(0,0,0,0.06);
    color:var(--text-3);
}
[data-appearance="light"] .settings-trigger:hover{
    background:rgba(0,0,0,0.08);
    color:var(--text-1);
}
[data-appearance="light"] .settings-trigger.active{
    background:var(--accent);
    color:#fff;
}
[data-appearance="light"] .settings-popover{
    background:rgba(255,255,255,0.92);
    border-color:rgba(0,0,0,0.08);
    box-shadow:0 8px 32px rgba(0,0,0,0.12);
}

@media(max-width:768px){
    [data-appearance="light"] .sidebar{
        background:#F2F2F7;
        border-right-color:rgba(0,0,0,0.08);
    }
    [data-appearance="light"] .mobile-toggle{
        background:rgba(255,255,255,0.96);
        border-color:rgba(0,0,0,0.08);
        color:rgba(28,28,30,0.86);
    }
    [data-appearance="light"] .mobile-backdrop{
        background:rgba(28,28,30,0.22);
    }
    [data-appearance="light"] .sidebar-footer{
        border-top-color:rgba(0,0,0,0.08);
        box-shadow:0 -10px 24px rgba(0,0,0,0.08);
    }
    [data-appearance="light"] body::before{
        background:var(--bg-base);
    }
}