/* ============================================================
   WORKSPACE  ·  ICON RAIL SIDEBAR  ·  EXPANDABLE PANELS
============================================================ */

.workspace{
    display:flex;flex:1;overflow:hidden;min-height:0;
    position:relative;
}

/* ── Icon Rail — Left ───────────────────────────────────── */
aside{
    width:var(--sidebar-w);
    background:var(--white);
    display:flex;flex-direction:column;
    overflow:hidden;flex-shrink:0;z-index:50;
    border-right:1px solid var(--border);
    transition:width .22s cubic-bezier(.4,0,.2,1);
    position:relative;
}
aside.expanded{width:var(--sidebar-exp)}

#sidebar-right{
    border-right:none;border-left:1px solid var(--border);
    width:var(--right-w);
}

/* ── Icon Tab Rail ─────────────────────────────────────── */
.left-sidebar-tabs{
    display:flex;flex-direction:column;
    width:var(--sidebar-w);
    flex-shrink:0;
    border-right:none;
    background:var(--white);
    position:absolute;top:0;left:0;bottom:0;
    z-index:2;
    border-right:1px solid var(--border);
}

.left-tab-btn{
    width:var(--sidebar-w);height:44px;
    border:none;background:transparent;color:var(--text3);
    display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:2px;font-size:8px;font-weight:700;text-transform:uppercase;
    letter-spacing:.04em;cursor:pointer;transition:all .13s;
    flex-shrink:0;position:relative;
}
.left-tab-btn:hover{background:var(--blue-lt);color:var(--blue)}
.left-tab-btn.active{
    background:var(--blue-lt);color:var(--blue);
    border-right:2px solid var(--blue);
}
.left-tab-btn svg{width:16px;height:16px}

/* ── Expandable Slide/Shape/Theme Panel ─────────────────── */
.left-panel{
    display:none;flex:1;flex-direction:column;
    overflow-y:auto;min-height:0;
    margin-left:var(--sidebar-w);
    background:var(--white);
}
.left-panel.active{display:flex}
aside:not(.expanded) .left-panel{display:none!important}

/* Panel Header */
.lp-header{
    display:flex;align-items:center;justify-content:space-between;
    padding:7px 10px;
    font-size:9.5px;font-weight:800;letter-spacing:.08em;
    text-transform:uppercase;color:var(--text3);
    background:var(--s2);border-bottom:1px solid var(--border);
    flex-shrink:0;
}

.btn-add-slide{
    padding:2px 8px;border:1px solid var(--blue-mid);
    background:var(--blue-lt);color:var(--blue);
    border-radius:var(--r);font-size:10px;font-weight:700;
    transition:all .13s;
}
.btn-add-slide:hover{background:var(--blue);color:var(--white);border-color:var(--blue)}

.lp-section{padding:10px;border-top:1px solid var(--border)}
.lp-sec-title{
    font-size:9.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.07em;color:var(--text3);margin-bottom:7px;
}

/* ── Slide Thumbnails ───────────────────────────────────── */
#pappers-panel{
    flex:1;overflow-y:auto;overflow-x:hidden;
    padding:8px 6px;
    display:flex;flex-direction:column;gap:7px;
    min-height:0;background:var(--s3);
}

.papper-thumb{
    flex-shrink:0;border:1.5px solid var(--border);
    border-radius:7px;background:var(--white);
    cursor:pointer;overflow:hidden;
    transition:all .14s;
    box-shadow:var(--sh-xs);
}
.papper-thumb:hover{
    border-color:var(--blue-mid);box-shadow:var(--sh-sm);
    transform:translateY(-1px);
}
.papper-thumb.active{
    border-color:var(--blue);
    box-shadow:0 0 0 2px rgba(0,0,255,.13),var(--sh-sm);
}
.papper-thumb.hidden-papper{opacity:.4}
.papper-thumb.dragging{opacity:.3;transform:scale(.96)}
.papper-thumb.drag-over{border-color:#00aa00}

.papper-preview-wrap{
    position:relative;width:100%;padding-top:56.25%;
    background:var(--s3);overflow:hidden;flex-shrink:0;
}
.papper-preview-canvas{
    position:absolute;top:0;left:0;
    width:100%!important;height:100%!important;display:block;
}

.papper-footer{
    display:flex;align-items:center;gap:4px;
    padding:4px 7px;background:var(--s2);
    border-top:1px solid var(--border);min-height:24px;flex-shrink:0;
}
.papper-num{
    width:16px;height:16px;background:var(--s3);
    border-radius:3px;display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:9px;color:var(--text3);flex-shrink:0;
    transition:all .13s;
}
.papper-thumb.active .papper-num{background:var(--blue);color:var(--white)}
.papper-name{
    font-weight:600;color:var(--text2);font-size:10px;
    flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}

.papper-actions{
    display:flex;gap:2px;flex-shrink:0;
    opacity:0;transition:opacity .13s;pointer-events:none;
}
.papper-thumb:hover .papper-actions{opacity:1;pointer-events:auto}

.papper-action-btn{
    width:20px;height:20px;border:1px solid var(--border);
    background:var(--white);border-radius:3px;color:var(--text3);
    font-size:9px;cursor:pointer;padding:0;
    display:flex;align-items:center;justify-content:center;
    transition:all .12s;
}
.papper-action-btn:hover{background:var(--blue-lt);border-color:var(--blue-mid);color:var(--blue)}
.papper-action-btn.danger:hover{background:#fff0f0;border-color:#fcc;color:#cc0000}

.hidden-badge{
    font-size:8px;background:#fffbeb;color:#b45309;
    padding:1px 4px;border-radius:2px;font-weight:700;flex-shrink:0;
}

.add-papper-btn{
    display:flex;align-items:center;justify-content:center;gap:5px;
    padding:9px;border:1.5px dashed var(--border2);border-radius:7px;
    font-size:11px;font-weight:700;color:var(--text3);
    cursor:pointer;transition:all .15s;flex-shrink:0;background:transparent;
}
.add-papper-btn:hover{border-color:var(--blue);color:var(--blue);background:var(--blue-lt)}

/* ── Themes ─────────────────────────────────────────────── */
.theme-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;padding:10px}
.theme-card{
    cursor:pointer;border-radius:7px;overflow:hidden;
    border:1.5px solid var(--border);transition:all .17s;
}
.theme-card:hover{border-color:var(--blue);box-shadow:var(--sh-sm)}
.theme-card.active{border-color:var(--blue);box-shadow:0 0 0 2px rgba(0,0,255,.12)}
.theme-preview{height:40px;overflow:hidden}
.theme-name{font-size:10px;font-weight:700;text-align:center;padding:4px;color:var(--text3)}

/* ── Toolbox ─────────────────────────────────────────────── */
.toolbox-category{margin-bottom:12px;padding:0 10px}
.category-header{
    font-size:9.5px;font-weight:800;color:var(--text3);
    margin:10px 0 6px;text-transform:uppercase;letter-spacing:.06em;
    display:flex;align-items:center;justify-content:space-between;
    cursor:pointer;user-select:none;
}
.category-header:hover{color:var(--blue)}
.category-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
.toolbox-item{
    aspect-ratio:1;border:1.5px solid var(--border);
    border-radius:6px;display:flex;align-items:center;justify-content:center;
    cursor:pointer;transition:all .15s;background:var(--white);
    color:var(--text3);font-size:10px;
    min-height:48px;
}
.toolbox-item:hover{
    border-color:var(--blue);color:var(--blue);background:var(--blue-lt);
    transform:translateY(-1px);box-shadow:var(--sh-xs);
}
.toolbox-item.active{border-color:var(--blue);background:var(--blue-lt);color:var(--blue)}

/* ── Right Sidebar ──────────────────────────────────────── */
.feature-tabs{
    display:flex;border-bottom:1px solid var(--border);
    flex-shrink:0;background:var(--s2);
    overflow-x:auto;
}
.feature-tabs::-webkit-scrollbar{height:0}

.feature-tab{
    flex:1;min-width:0;padding:7px 2px;
    border:none;background:transparent;color:var(--text3);
    font-size:9px;font-weight:700;cursor:pointer;
    border-bottom:2px solid transparent;text-transform:uppercase;
    letter-spacing:.03em;transition:all .13s;white-space:nowrap;
}
.feature-tab:hover{color:var(--blue);background:var(--blue-lt)}
.feature-tab.active{color:var(--blue);border-bottom-color:var(--blue);background:var(--white)}

.feature-panel{display:none;flex-direction:column;flex:1;overflow:hidden}
.feature-panel.active{display:flex}

.rp-header{
    padding:7px 12px;font-size:9.5px;font-weight:800;
    text-transform:uppercase;letter-spacing:.07em;color:var(--text3);
    background:var(--s2);border-bottom:1px solid var(--border);flex-shrink:0;
}

.rp-section{padding:8px 12px;border-bottom:1px solid var(--border)}
.rp-section:last-child{border-bottom:none}
.rp-sec-title{
    font-size:9.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.06em;color:var(--text3);margin-bottom:7px;
}

#properties-content{display:flex;flex-direction:column;flex:1;overflow:hidden;min-height:0}
.rp-scroll{flex:1;overflow-y:auto;min-height:0}

.prop-row{
    display:flex;align-items:center;justify-content:space-between;
    margin-bottom:6px;font-size:11.5px;
}
.prop-row:last-child{margin-bottom:0}
.prop-row label{color:var(--text2);font-weight:500;font-size:11.5px}

/* Effects */
.eff-row{display:flex;gap:3px;flex-wrap:wrap}
.eff-btn{
    flex:1;min-width:46px;padding:4px 6px;
    border:1px solid var(--border);border-radius:var(--r);
    background:var(--white);font-size:10.5px;font-weight:600;
    color:var(--text2);transition:all .13s;text-align:center;
}
.eff-btn:hover{background:var(--blue-lt);border-color:var(--blue-mid);color:var(--blue)}
.eff-btn.active{background:var(--blue-lt);border-color:var(--blue);color:var(--blue);font-weight:700}
.eff-btn-sm{
    padding:3px 8px;border:1px solid var(--border);border-radius:var(--r);
    background:var(--white);font-size:10.5px;font-weight:600;color:var(--text2);
    transition:all .13s;
}
.eff-btn-sm:hover{background:var(--blue-lt);border-color:var(--blue-mid);color:var(--blue)}
.eff-btn-sm.active{background:var(--blue-lt);border-color:var(--blue);color:var(--blue)}

.debug-panel{
    margin:8px;padding:6px;background:#0a0a14;border-radius:var(--r);
    font-size:9.5px;color:#555;font-family:Consolas,monospace;
    max-height:80px;overflow-y:auto;border:1px solid var(--border);
}

/* Background panel */
.bg-control-row{display:flex;align-items:center;justify-content:space-between;padding:3px 0;margin-bottom:3px}
.bg-control-label{font-size:11.5px;color:var(--text2);font-weight:500}
.bg-color-swatch-wrap{
    position:relative;width:32px;height:22px;
    border-radius:var(--r);overflow:hidden;border:1px solid var(--border);cursor:pointer;
}
.bg-color-input{
    position:absolute;width:150%;height:150%;top:-25%;left:-25%;
    border:none;padding:0;cursor:pointer;background:none;
}
.bg-subsection-title{
    font-size:9.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.07em;color:var(--text3);margin:6px 0 5px;
}
.bg-gradient-row{display:flex;flex-direction:column;gap:4px;margin-bottom:5px}
.bg-color-pair{display:flex;gap:4px}
.bg-color-pair .bg-color-input{
    position:relative;width:100%;height:24px;flex:1;
    top:0;left:0;border-radius:var(--r);border:1px solid var(--border);
    cursor:pointer;padding:0;
}
.bg-dir-select{
    width:100%;height:26px;border:1px solid var(--border);
    border-radius:var(--r);background:var(--white);color:var(--text);
    font-size:11px;padding:0 5px;cursor:pointer;
}
.bg-action-btn{
    display:flex;align-items:center;justify-content:center;gap:5px;
    width:100%;height:28px;border-radius:var(--r);
    font-size:11.5px;font-weight:600;border:none;cursor:pointer;transition:all .13s;
}
.bg-action-primary{background:var(--blue);color:var(--white)}
.bg-action-primary:hover{background:var(--blue-dk)}
.bg-action-secondary{background:var(--white);color:var(--text);border:1px solid var(--border)!important}
.bg-action-secondary:hover{background:var(--blue-lt);color:var(--blue);border-color:var(--blue-mid)!important}
.bg-action-danger{background:#fff0f0;color:#cc0000;border:1px solid #fcc!important}
.bg-action-danger:hover{background:#ffe0e0;border-color:#f99!important}
.bg-btn-row{display:flex;gap:4px}