/* ════════════════════════════════════════════════════════════
   ECAD Pro — Modern Ribbon Theme
   Light gray classic-Windows look, dense & square.
   ════════════════════════════════════════════════════════════ */

:root {
    /* Chrome (ribbon / panels) — light gray */
    --ep-bg:            #f3f3f3;
    --ep-bg-2:          #e9e9ec;
    --ep-bg-3:          #dfe0e4;
    --ep-panel:         #f7f7f9;
    --ep-panel-head:    #e4e6ea;
    --ep-hover:         #d6e4f7;
    --ep-hover-border:  #9cbce6;
    --ep-active:        #cfe0f7;
    --ep-active-border: #4a90d9;
    --ep-selected:      #cce4ff;

    --ep-border:        #c4c6cc;
    --ep-border-soft:   #d8dade;
    --ep-divider:       #c9cbd1;

    --ep-text:          #1f2229;
    --ep-text-2:        #4b4f57;
    --ep-text-mute:     #8a8e96;
    --ep-accent:        #1c6fd6;
    --ep-accent-2:      #0e5bbf;

    /* control/panel surface — the semantic replacement for literal #fff, so dark mode has one place to override */
    --ep-surface:       #ffffff;
    --ep-tint-err:      #fde6e6;
    --ep-tint-warn:     #fdf3dd;
    --ep-tint-accent:   #e4eefb;
    --ep-scroll-thumb:      #b7b9bf;
    --ep-scroll-thumb-hover: #9b9da4;

    /* Ribbon tab bar */
    --ep-tabbar:        #2a5fa5;   /* blue header strip */
    --ep-tabbar-text:   #ffffff;

    /* Drawing area */
    --ep-canvas-bg:     #6e7378;   /* CAD gray void */
    --ep-sheet:         #ffffff;
    --ep-sheet-line:    #000000;
    --ep-grid:          #d9d9d9;

    /* Status colors */
    --ep-ok:            #2e8b40;
    --ep-warn:          #d08a18;
    --ep-err:           #c23b3b;

    /* ── Design tokens (scale) — single source of truth ── */
    /* radius */
    --r-xs: 2px;  --r-sm: 3px;  --r-md: 5px;  --r-lg: 8px;  --r-pill: 999px;
    /* spacing */
    --sp-1: 2px;  --sp-2: 4px;  --sp-3: 6px;  --sp-4: 8px;  --sp-5: 12px;  --sp-6: 16px;  --sp-7: 24px;
    /* font sizes */
    --fz-xs: 10.5px;  --fz-sm: 11.5px;  --fz-md: 12px;  --fz-lg: 14px;  --fz-xl: 18px;
    /* elevation */
    --sh-1: 0 1px 3px rgba(0,0,0,0.12);
    --sh-2: 0 6px 22px rgba(0,0,0,0.22);
    --sh-3: 0 14px 40px rgba(0,0,0,0.30);
    /* motion */
    --tr-fast: 0.12s ease;  --tr-base: 0.18s ease;
    /* control height */
    --h-ctl: 26px;  --h-ctl-sm: 22px;
    /* z-index ladder */
    --z-dock: 10;  --z-ctx: 50;  --z-rev: 60;  --z-backstage: 100;  --z-modal: 150;  --z-toast: 200;  --z-palette: 250;
    /* roadmap (not-yet-available) marker — calm slate, reads as "planned" not "warning" */
    --ep-stub: #7a8aa8;
}

/* ════════════════════════════════════════════════════════════
   DARK MODE — one override block, everything else uses var(--ep-*)
   Toggled via body.ep-dark (Settings > Görünüm). The drawing sheet
   itself (--ep-sheet) stays white on purpose — real paper does not
   go dark just because the app chrome does. --ep-canvas-bg (the void
   around the sheet) is user-selectable separately, not tied to this.
   ════════════════════════════════════════════════════════════ */
.ep-root.ep-dark {
    --ep-bg:            #1e2126;
    --ep-bg-2:          #26292f;
    --ep-bg-3:          #2d3138;
    --ep-panel:         #24272d;
    --ep-panel-head:    #2b2f36;
    --ep-hover:         #33455e;
    --ep-hover-border:  #4a6588;
    --ep-active:        #3a5578;
    --ep-active-border: #5b8bc4;
    --ep-selected:      #33547a;

    --ep-border:        #3a3e46;
    --ep-border-soft:   #33373e;
    --ep-divider:       #34383f;

    --ep-text:          #e4e6ea;
    --ep-text-2:        #b6bac2;
    --ep-text-mute:     #7a7f88;

    --ep-surface:       #262a31;
    --ep-tint-err:      #4a2426;
    --ep-tint-warn:     #4a3c1f;
    --ep-tint-accent:   #1f3550;
    --ep-scroll-thumb:      #454951;
    --ep-scroll-thumb-hover: #565b64;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: 'Segoe UI', Tahoma, sans-serif;
    font-size: 12px;
    background: var(--ep-bg);
    color: var(--ep-text);
    overflow: hidden;
    height: 100vh;
    -webkit-font-smoothing: antialiased;
    user-select: none;
}

/* ── Root ── */
.ep-root {
    display: flex;
    flex-direction: column;
    height: 100vh;
    overflow: hidden;
    background: var(--ep-bg);
    /* re-declares color (not just inheriting it from <body>) so descendants that don't set their own
       color re-evaluate --ep-text from THIS element's scope — otherwise .ep-dark (applied here, not on
       <body>) never reaches inherited-color text, since CSS inheritance passes the resolved value from
       the nearest ancestor that actually declares "color", and that was always <body> (outside .ep-dark). */
    color: var(--ep-text);
}

/* ════════════ TITLE / QUICK ACCESS BAR ════════════ */
.ep-titlebar {
    display: flex;
    align-items: center;
    height: 26px;
    padding: 0 8px;
    background: var(--ep-tabbar);
    color: var(--ep-tabbar-text);
    flex-shrink: 0;
    gap: 8px;
}
.ep-qa {
    display: flex;
    align-items: center;
    gap: 1px;
}
.ep-qa-btn {
    width: 20px; height: 20px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 2px;
    cursor: pointer;
    color: #dce8f7;
    font-size: 13px;
}
.ep-qa-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
.ep-title-text {
    flex: 1;
    text-align: center;
    font-size: 12px;
    color: #eaf1fb;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ep-title-prod { font-weight: 600; }

/* ════════════ RIBBON TABS ════════════ */
.ep-ribbon-tabs {
    display: flex;
    align-items: flex-end;
    height: 26px;
    background: var(--ep-tabbar);
    padding: 0 4px;
    flex-shrink: 0;
    gap: 1px;
}
.ep-tab {
    padding: 4px 14px 5px;
    font-size: 12px;
    color: #d2e0f2;
    cursor: pointer;
    border-radius: 3px 3px 0 0;
    white-space: nowrap;
    line-height: 1;
}
.ep-tab:hover { background: rgba(255,255,255,0.14); color: #fff; }
.ep-tab.active {
    background: var(--ep-bg);
    color: var(--ep-text);
    font-weight: 600;
}
.ep-tab.file {
    background: #1f4f8c;
    color: #fff;
    font-weight: 600;
    border-radius: 0;
    margin-right: 4px;
}
.ep-tab.file:hover { background: #16406f; }

/* ════════════ RIBBON BODY ════════════ */
.ep-ribbon {
    display: flex;
    align-items: stretch;
    height: 92px;
    background: var(--ep-bg);
    border-bottom: 1px solid var(--ep-border);
    padding: 4px 2px 2px;
    flex-shrink: 0;
    overflow-x: auto;
    overflow-y: hidden;
}
.ep-rgroup {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 6px;
    border-right: 1px solid var(--ep-divider);
    min-width: max-content;
}
.ep-rgroup-body {
    display: flex;
    align-items: flex-start;
    gap: 2px;
    flex: 1;
    padding-top: 2px;
}
.ep-rgroup-label {
    font-size: 10px;
    color: var(--ep-text-mute);
    text-align: center;
    padding: 3px 0 1px;
    width: 100%;
    border-top: 1px solid var(--ep-border-soft);
    margin-top: 2px;
}

/* large ribbon button */
.ep-btn-lg {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 3px;
    width: 58px;
    padding: 5px 3px 4px;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    color: var(--ep-text);
    text-align: center;
}
.ep-btn-lg:hover { background: var(--ep-hover); border-color: var(--ep-hover-border); }
.ep-btn-lg.active { background: var(--ep-active); border-color: var(--ep-active-border); }
.ep-btn-lg .ico { font-size: 22px; line-height: 1; height: 24px; }
.ep-btn-lg .lbl { font-size: 10.5px; line-height: 1.15; max-width: 56px; }

/* small ribbon buttons (stacked column) */
.ep-btn-col { display: flex; flex-direction: column; gap: 1px; justify-content: flex-start; }
.ep-btn-sm {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 3px 8px 3px 5px;
    border: 1px solid transparent;
    border-radius: 3px;
    cursor: pointer;
    font-size: 11.5px;
    white-space: nowrap;
}
.ep-btn-sm:hover { background: var(--ep-hover); border-color: var(--ep-hover-border); }
.ep-btn-sm.active { background: var(--ep-active); border-color: var(--ep-active-border); }
.ep-btn-sm .ico { font-size: 15px; width: 18px; text-align: center; }
.ep-btn-sm.disabled { color: var(--ep-text-mute); pointer-events: none; opacity: 0.55; }

/* ════════════ WORKSPACE ════════════ */
.ep-workspace {
    display: flex;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

/* ── Dock panels (left/right) ── */
.ep-dock {
    display: flex;
    flex-direction: column;
    background: var(--ep-panel);
    overflow: hidden;
    flex-shrink: 0;
}
.ep-dock.left  { width: 256px; border-right: 1px solid var(--ep-border); }
.ep-dock.right { width: 232px; border-left: 1px solid var(--ep-border); }

.ep-dock-title {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 24px;
    padding: 0 8px;
    background: var(--ep-panel-head);
    border-bottom: 1px solid var(--ep-border);
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ep-text-2);
    flex-shrink: 0;
}
.ep-dock-title .ico { font-size: 14px; }
.ep-dock-title .sp { flex: 1; }
.ep-dock-title .x { cursor: pointer; color: var(--ep-text-mute); }
.ep-dock-title .x:hover { color: var(--ep-text); }

.ep-dock-body { flex: 1; overflow: auto; min-height: 0; }

/* ── Navigator tree ── */
.ep-tree { padding: 2px 0; font-size: 12px; }
.ep-tnode {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 6px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--ep-text);
    line-height: 1.5;
}
.ep-tnode:hover { background: var(--ep-hover); }
.ep-tnode.sel { background: var(--ep-selected); }
.ep-tnode .twist { width: 12px; text-align: center; color: var(--ep-text-mute); font-size: 9px; }
.ep-tnode .ico { width: 16px; text-align: center; font-size: 13px; }
.ep-tnode .lbl { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.ep-tnode .meta { color: var(--ep-text-mute); font-size: 10.5px; }

/* navigator bottom tabs (Pages/Devices/Terminals...) */
.ep-nav-tabs {
    display: flex;
    border-top: 1px solid var(--ep-border);
    background: var(--ep-bg-2);
    flex-shrink: 0;
    overflow-x: auto;
}
.ep-nav-tab {
    padding: 4px 9px;
    font-size: 11px;
    color: var(--ep-text-2);
    cursor: pointer;
    border-right: 1px solid var(--ep-border-soft);
    white-space: nowrap;
}
.ep-nav-tab:hover { background: var(--ep-hover); }
.ep-nav-tab.active {
    background: var(--ep-panel);
    color: var(--ep-accent);
    font-weight: 600;
    border-bottom: 2px solid var(--ep-accent);
}

.sym-badge {
    font-family: Consolas, monospace;
    font-size: 10px; font-weight: 700;
    color: #b06a16;
    background: #fff2dd;
    border: 1px solid #e7c89a;
    border-radius: 3px;
    min-width: 16px; text-align: center;
    padding: 0 3px; margin-right: 2px;
}
.ep-status .mode-indicator { color: #ffe08a; font-weight: 600; }

/* ════════════ CENTER (page tabs + canvas) ════════════ */
.ep-center {
    flex: 1;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-width: 0;
}
.ep-pagetabs {
    display: flex;
    align-items: stretch;
    height: 27px;
    background: var(--ep-bg-2);
    border-bottom: 1px solid var(--ep-border);
    flex-shrink: 0;
    overflow-x: auto;
}
.ep-ptab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 12px;
    font-size: 11.5px;
    color: var(--ep-text-2);
    cursor: pointer;
    border-right: 1px solid var(--ep-border-soft);
    white-space: nowrap;
    background: var(--ep-bg-3);
}
.ep-ptab:hover { background: var(--ep-hover); }
.ep-ptab.active {
    background: var(--ep-canvas-bg);
    color: #fff;
    border-bottom: 2px solid var(--ep-accent);
}
.ep-ptab .pno { font-weight: 600; }
.ep-ptab .x { color: var(--ep-text-mute); font-size: 13px; }
.ep-ptab.active .x { color: #d6e2f0; }
.ep-ptab .x:hover { color: var(--ep-err); }

.ep-canvas-wrap {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: var(--ep-canvas-bg);
}
.ep-canvas-wrap svg { display: block; width: 100%; height: 100%; }
.ep-docpage { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; padding: 18px; box-sizing: border-box; }
.ep-docpage svg { width: auto; height: 100%; max-width: 100%; box-shadow: 0 2px 14px rgba(0,0,0,0.18); background: #fff; }
.ep-tbe { display: flex; gap: 10px; align-items: flex-start; }
.ep-tbe-canvas { flex: 1.4; min-width: 0; }
.ep-tbe-side { flex: 1; min-width: 0; }
.ep-tbe-hint { font-size: 10.5px; color: var(--ep-text-mute); margin-top: 3px; }
.ep-rev-pop { position: absolute; top: 92px; right: 16px; z-index: 60; width: 360px; background: var(--ep-panel); border: 1px solid var(--ep-border); border-radius: 4px; box-shadow: 0 6px 22px rgba(0,0,0,0.22); padding: 8px; }
.ep-rev-head { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12px; margin-bottom: 6px; }
.ep-rev-row { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.ep-ai-panel { position: absolute; top: 92px; right: 16px; z-index: 60; width: 340px; max-height: 70vh; display: flex; flex-direction: column; background: var(--ep-panel); border: 1px solid var(--ep-border); border-radius: 4px; box-shadow: 0 6px 22px rgba(0,0,0,0.22); padding: 8px; }
.ep-ai-log { flex: 1; overflow-y: auto; min-height: 120px; max-height: 42vh; display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.ep-ai-msg { font-size: 12px; line-height: 1.4; padding: 6px 8px; border-radius: 6px; white-space: pre-wrap; word-break: break-word; }
.ep-ai-msg.u { align-self: flex-end; background: var(--ep-accent); color: #fff; max-width: 88%; }
.ep-ai-msg.a { align-self: flex-start; background: var(--ep-hover); color: var(--ep-text); max-width: 92%; }
.ep-ai-input-row { display: flex; gap: 6px; }
.ep-form-grid { display: grid; grid-template-columns: 96px 1fr; gap: 6px 8px; align-items: center; }
.ep-form-grid label { font-size: 12px; color: var(--ep-text-2); }
.ep-lib-std { display: flex; align-items: center; gap: 6px; font-weight: 600; font-size: 12.5px; color: var(--ep-text); margin: 10px 2px 6px; padding-bottom: 4px; border-bottom: 1px solid var(--ep-border); }
.ep-lib-std .ico { font-size: 16px; color: #d6a032; }
.ep-lib-std-n { color: var(--ep-text-mute); font-weight: 400; }
.ep-xref-chip { display: flex; align-items: center; gap: 5px; padding: 3px 6px; margin: 2px 0; border: 1px solid var(--ep-border); border-radius: 3px; cursor: pointer; font-size: 11.5px; background: var(--ep-surface); }
.ep-xref-chip:hover { background: var(--ep-hover); border-color: var(--ep-hover-border); }
.ep-xref-chip .ico { font-size: 14px; color: var(--ep-accent); }
.ep-xref-chip .k { color: var(--ep-text-2); }
.ep-xref-chip .sp { flex: 1; }
.ep-xref-chip .loc { color: var(--ep-accent); font-family: Consolas, monospace; }

.ep-zoom-btn {
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.92);
    border: 1px solid var(--ep-border);
    border-radius: 3px;
    cursor: pointer;
    font-size: 15px;
    color: var(--ep-text-2);
    user-select: none;
}
.ep-zoom-btn:hover { background: var(--ep-hover); border-color: var(--ep-hover-border); }

/* ── Coordinate readout overlay ── */
.ep-coord {
    position: absolute;
    left: 8px; bottom: 8px;
    background: rgba(20,24,30,0.78);
    color: #d6e2f0;
    font-family: Consolas, monospace;
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 3px;
    pointer-events: none;
}

/* ════════════ PROPERTIES (right) ════════════ */
.ep-prop-group { border-bottom: 1px solid var(--ep-border-soft); }
.ep-prop-ghead {
    padding: 4px 8px;
    background: var(--ep-panel-head);
    font-size: 11px;
    font-weight: 600;
    color: var(--ep-text-2);
}
.ep-prop-row {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--ep-border-soft);
    font-size: 11.5px;
    min-height: 22px;
}
.ep-prop-row:last-child { border-bottom: none; }
.ep-prop-k {
    width: 96px;
    padding: 3px 8px;
    color: var(--ep-text-2);
    background: var(--ep-bg);
    border-right: 1px solid var(--ep-border-soft);
    flex-shrink: 0;
}
.ep-prop-v {
    flex: 1;
    padding: 3px 8px;
    color: var(--ep-text);
    overflow: hidden;
    text-overflow: ellipsis;
}
.ep-prop-empty {
    padding: 18px 12px;
    text-align: center;
    color: var(--ep-text-mute);
    font-style: italic;
}

/* ════════════ STATUS BAR ════════════ */
.ep-status {
    display: flex;
    align-items: center;
    height: 22px;
    background: var(--ep-tabbar);
    color: #e8f0fb;
    font-size: 11px;
    flex-shrink: 0;
    padding: 0 4px;
}
.ep-status .si {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 8px;
    height: 100%;
    border-right: 1px solid rgba(255,255,255,0.18);
}
.ep-status .si.click { cursor: pointer; }
.ep-status .si.click:hover { background: rgba(255,255,255,0.14); }
.ep-status .sp { flex: 1; }
.ep-status .si .ico { font-size: 13px; }

/* ── Context menu ── */
.ep-ctxmenu {
    position: absolute;
    z-index: 50;
    min-width: 168px;
    background: var(--ep-surface);
    border: 1px solid var(--ep-border);
    box-shadow: 0 6px 22px rgba(0,0,0,0.22);
    border-radius: 4px;
    padding: 4px;
}
.ep-ctx-item {
    display: flex; align-items: center; gap: 8px;
    padding: 6px 10px; border-radius: 3px; cursor: pointer; font-size: 12px;
}
.ep-ctx-item .material-icons-outlined { font-size: 16px; color: var(--ep-text-2); }
.ep-ctx-item .k { margin-left: auto; color: var(--ep-text-mute); font-size: 10.5px; }
.ep-ctx-item:hover { background: var(--ep-hover); }
.ep-ctx-item.danger:hover { background: var(--ep-tint-err); color: var(--ep-err); }
.ep-ctx-item.danger:hover .material-icons-outlined { color: var(--ep-err); }
.ep-ctx-sep { height: 1px; background: var(--ep-border-soft); margin: 4px 2px; }

/* ── Dosya backstage ── */
.ep-backstage {
    position: absolute; inset: 0; z-index: 100;
    display: flex; background: var(--ep-bg);
}
.ep-bs-menu {
    width: 210px; background: var(--ep-tabbar); color: #eaf1fb;
    padding: 6px 0; display: flex; flex-direction: column; gap: 1px;
}
.ep-bs-back {
    display: flex; align-items: center; justify-content: center;
    width: 34px; height: 34px; margin: 2px 6px 8px; border-radius: 3px; cursor: pointer;
    background: rgba(255,255,255,0.12);
}
.ep-bs-back:hover { background: rgba(255,255,255,0.25); }
.ep-bs-item {
    display: flex; align-items: center; gap: 10px;
    padding: 9px 16px; cursor: pointer; font-size: 13px; color: #dce8f7;
}
.ep-bs-item .material-icons-outlined { font-size: 18px; }
.ep-bs-item:hover { background: rgba(255,255,255,0.14); color: #fff; }
.ep-bs-item.active { background: var(--ep-bg); color: var(--ep-text); }
.ep-bs-item.active .material-icons-outlined { color: var(--ep-accent); }
.ep-bs-sep { height: 1px; background: rgba(255,255,255,0.18); margin: 6px 12px; }
.ep-bs-content { flex: 1; padding: 28px 36px; overflow: auto; }
.ep-bs-content h2 { font-size: 18px; font-weight: 600; color: var(--ep-text); margin: 0 0 12px; }
.ep-recent { display: flex; flex-direction: column; gap: 4px; max-width: 520px; }
.ep-recent-item {
    display: flex; align-items: center; gap: 12px;
    padding: 9px 12px; border: 1px solid transparent; border-radius: 4px; cursor: pointer;
}
.ep-recent-item:hover { background: var(--ep-panel); border-color: var(--ep-border); }
.rc-name { font-size: 13px; color: var(--ep-text); }
.rc-date { font-size: 11px; color: var(--ep-text-mute); }

/* ── Toast ── */
.ep-toast {
    position: absolute; left: 50%; bottom: 40px; transform: translateX(-50%);
    z-index: 200;
    background: #2a2f38; color: #fff; font-size: 12.5px;
    padding: 9px 18px; border-radius: 5px;
    box-shadow: 0 8px 26px rgba(0,0,0,0.35);
    animation: ep-toast-in 0.18s ease;
}
@keyframes ep-toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* ── Editable property inputs ── */
.ep-prop-in {
    width: 100%; border: 1px solid transparent; background: transparent;
    font: inherit; font-size: 11.5px; color: var(--ep-text);
    padding: 2px 4px; border-radius: 2px; outline: none;
}
.ep-prop-in:hover { border-color: var(--ep-border-soft); background: var(--ep-surface); }
.ep-prop-in:focus { border-color: var(--ep-accent-border); background: var(--ep-surface); box-shadow: 0 0 0 1px var(--ep-active-border); }
.ep-prop-in.tag { font-weight: 700; }
.ep-ptab-in {
    width: 92px; font: inherit; font-size: 11.5px; padding: 1px 4px;
    border: 1px solid var(--ep-active-border); border-radius: 2px; outline: none;
}

/* ── Settings ── */
.ep-set-h { font-size: 11px; font-weight: 700; color: var(--ep-text-2); text-transform: uppercase; letter-spacing: 0.4px; margin: 12px 0 4px; border-bottom: 1px solid var(--ep-border-soft); padding-bottom: 3px; }
.ep-set-row { display: flex; align-items: center; gap: 8px; padding: 5px 2px; font-size: 12px; }
.ep-set-row input[type=checkbox] { width: 15px; height: 15px; }
.ep-accent-dot { width: 20px; height: 20px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1px rgba(0,0,0,0.15); }
.ep-accent-dot:hover { transform: scale(1.12); }
.ep-accent-dot.sel { box-shadow: 0 0 0 2px var(--ep-accent); }
.ep-macro-row { display: flex; align-items: center; gap: 10px; padding: 5px 2px; border-bottom: 1px solid var(--ep-border-soft); font-size: 12px; }
.ep-macro-thumb { width: 64px; height: 48px; border: 1px solid var(--ep-border-soft); border-radius: 3px; background: var(--ep-surface); flex-shrink: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; }

/* ── Add-item row (lists) ── */
.ep-additem { display: flex; align-items: center; gap: 6px; padding: 4px 8px; margin: 2px 6px; cursor: pointer; font-size: 11.5px; color: var(--ep-accent); border: 1px dashed var(--ep-hover-border); border-radius: 3px; }
.ep-additem:hover { background: var(--ep-hover); }
.ep-additem .material-icons-outlined { font-size: 15px; }

/* ── Library manager grid ── */
.ep-lib-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.ep-lib-cell { position: relative; border: 1px solid var(--ep-border-soft); border-radius: 4px; padding: 6px; background: var(--ep-surface); }
.ep-lib-cell:hover { border-color: var(--ep-hover-border); }
.ep-lib-prev { height: 50px; display: flex; align-items: center; justify-content: center; }
.ep-lib-name { font-size: 10.5px; color: var(--ep-text-2); margin-top: 4px; display: flex; align-items: center; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ep-lib-del { position: absolute; top: 2px; right: 2px; font-size: 15px; color: var(--ep-text-mute); cursor: pointer; opacity: 0; }
.ep-lib-cell:hover .ep-lib-del { opacity: 1; }
.ep-lib-del:hover { color: var(--ep-err); }

/* ── Reports table ── */
.ep-badge { background: var(--ep-bg-3); border: 1px solid var(--ep-border); border-radius: 10px; padding: 1px 9px; font-size: 11px; color: var(--ep-text-2); }
.ep-report { border-collapse: collapse; width: 100%; max-width: 900px; font-size: 12px; background: var(--ep-surface); }
.ep-report th { background: var(--ep-panel-head); border: 1px solid var(--ep-border); padding: 5px 10px; text-align: left; font-weight: 600; position: sticky; top: 0; }
.ep-report td { border: 1px solid var(--ep-border-soft); padding: 4px 10px; }
.ep-report tbody tr:nth-child(even) { background: var(--ep-bg); }
.ep-report tbody tr:hover { background: var(--ep-hover); }

/* ── Modal (DRC) ── */
.ep-modal-back { position: absolute; inset: 0; z-index: 150; background: rgba(20,24,30,0.35); display: flex; align-items: center; justify-content: center; }
.ep-modal { width: 560px; max-height: 70vh; background: var(--ep-surface); border: 1px solid var(--ep-border); border-radius: 6px; box-shadow: 0 14px 40px rgba(0,0,0,0.3); display: flex; flex-direction: column; overflow: hidden; }
.ep-modal-head { display: flex; align-items: center; gap: 8px; padding: 10px 14px; background: var(--ep-panel-head); border-bottom: 1px solid var(--ep-border); font-weight: 600; }
.ep-modal-body { padding: 10px 14px; overflow: auto; }

/* ── Categorised settings: macOS-style sidebar + content pane ── */
.ep-set-wrap { display: flex; min-height: 0; flex: 1; }
.ep-set-nav { width: 184px; flex-shrink: 0; border-right: 1px solid var(--ep-border); background: var(--ep-panel); overflow-y: auto; padding: 6px; }
.ep-set-nav-item { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 12.5px; color: var(--ep-text); user-select: none; }
.ep-set-nav-item:hover { background: var(--ep-hover); }
.ep-set-nav-item.active { background: var(--ep-accent); color: #fff; }
.ep-set-nav-item.active .ico { color: #fff; }
.ep-set-nav-item .ico { font-size: 18px; color: var(--ep-accent); width: 20px; text-align: center; }
.ep-set-pane { flex: 1; overflow-y: auto; padding: 4px 16px 16px; min-width: 0; }
.ep-set-pane .ep-set-h:first-child { margin-top: 8px; }
.ep-set-panehead { font-size: 15px; font-weight: 700; margin: 10px 0 2px; }
.ep-set-panesub { font-size: 11.5px; color: var(--ep-text-mute); margin-bottom: 8px; }
.ep-drc-sum { display: flex; gap: 8px; margin-bottom: 10px; }
.ep-drc-sum .sev { font-size: 11px; padding: 2px 10px; border-radius: 10px; font-weight: 600; }
.ep-drc-sum .hata { background: var(--ep-tint-err); color: var(--ep-err); }
.ep-drc-sum .uyari { background: var(--ep-tint-warn); color: var(--ep-warn); }
.ep-drc-sum .bilgi { background: var(--ep-tint-accent); color: var(--ep-accent); }
.ep-drc-row { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-bottom: 1px solid var(--ep-border-soft); font-size: 12px; }
.ep-drc-row .m { flex: 1; }
.ep-drc-row .w { color: var(--ep-text-mute); font-size: 11px; }
.sev-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.sev-dot.hata { background: var(--ep-err); }
.sev-dot.uyari { background: var(--ep-warn); }
.sev-dot.bilgi { background: var(--ep-accent); }

/* scrollbars (thin, classic) */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ep-bg-2); }
::-webkit-scrollbar-thumb { background: var(--ep-scroll-thumb); border: 2px solid var(--ep-bg-2); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: var(--ep-scroll-thumb-hover); }

/* ── Ctrl+K command palette ── */
.ep-palette-back { position: fixed; inset: 0; background: rgba(20,24,32,0.35); z-index: var(--z-palette); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; }
.ep-palette { width: 560px; max-height: 60vh; background: var(--ep-surface); border-radius: var(--r-lg); box-shadow: var(--sh-3); display: flex; flex-direction: column; overflow: hidden; }
.ep-palette-search { display: flex; align-items: center; gap: 8px; padding: 12px 14px; border-bottom: 1px solid var(--ep-border); }
.ep-palette-in { flex: 1; border: none; outline: none; font-size: 14px; background: transparent; color: var(--ep-text); }
.ep-palette-list { overflow-y: auto; padding: 6px; }
.ep-palette-empty { padding: 16px; text-align: center; color: var(--ep-text-mute); font-size: 13px; }
.ep-palette-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: var(--r-md, 6px); cursor: pointer; font-size: 13px; }
.ep-palette-item .lbl { flex: 1; }
.ep-palette-item .tab { color: var(--ep-text-mute); font-size: 11px; }
.ep-palette-item:hover, .ep-palette-item.sel { background: var(--ep-accent); color: #fff; }
.ep-palette-item.sel .tab, .ep-palette-item:hover .tab { color: rgba(255,255,255,0.75); }

/* draws attention to an always-visible dock (e.g. ribbon "Özellikler" on the properties dock) */
@keyframes ep-pulse-kf { 0%, 100% { box-shadow: none; } 50% { box-shadow: inset 0 0 0 2px var(--ep-accent, #3b82f6); } }
.ep-pulse { animation: ep-pulse-kf 0.45s ease-in-out 2; }

/* ════════════════════════════════════════════════════════════
   DESIGN SYSTEM — shared primitives (adopt across app)
   One visual language: buttons, fields, segmented control,
   modal sizes, section headers. Use these instead of bespoke
   styles so every panel/modal/toolbar stays consistent.
   ════════════════════════════════════════════════════════════ */

/* ── Button ── */
.ep-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-3);
    height: var(--h-ctl); padding: 0 var(--sp-5);
    border: 1px solid var(--ep-border); border-radius: var(--r-md);
    background: var(--ep-surface); color: var(--ep-text);
    font: inherit; font-size: var(--fz-md); line-height: 1;
    cursor: pointer; white-space: nowrap; user-select: none;
    transition: background var(--tr-fast), border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.ep-btn .ico, .ep-btn .material-icons-outlined { font-size: 16px; }
.ep-btn:hover { background: var(--ep-hover); border-color: var(--ep-hover-border); }
.ep-btn:active { background: var(--ep-active); }
.ep-btn:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ep-active-border); }
.ep-btn.primary { background: var(--ep-accent); border-color: var(--ep-accent-2); color: #fff; }
.ep-btn.primary:hover { background: var(--ep-accent-2); border-color: var(--ep-accent-2); }
.ep-btn.primary .material-icons-outlined { color: #fff; }
.ep-btn.ghost { background: transparent; border-color: transparent; }
.ep-btn.ghost:hover { background: var(--ep-hover); border-color: var(--ep-hover-border); }
.ep-btn.danger { color: var(--ep-err); border-color: #e3b4b4; background: var(--ep-surface); }
.ep-btn.danger:hover { background: var(--ep-tint-err); border-color: var(--ep-err); }
.ep-btn.sm { height: var(--h-ctl-sm); padding: 0 var(--sp-4); font-size: var(--fz-sm); }
.ep-btn:disabled, .ep-btn.disabled { opacity: 0.5; pointer-events: none; }

/* ── Field / input / select (unified) ── */
.ep-input, .ep-select, .ep-textarea {
    width: 100%; height: var(--h-ctl);
    padding: 0 var(--sp-4); border: 1px solid var(--ep-border); border-radius: var(--r-md);
    background: var(--ep-surface); color: var(--ep-text); font: inherit; font-size: var(--fz-md);
    outline: none; transition: border-color var(--tr-fast), box-shadow var(--tr-fast);
}
.ep-textarea { height: auto; min-height: 60px; padding: var(--sp-3) var(--sp-4); resize: vertical; line-height: 1.4; }
.ep-input:hover, .ep-select:hover, .ep-textarea:hover { border-color: var(--ep-hover-border); }
.ep-input:focus, .ep-select:focus, .ep-textarea:focus { border-color: var(--ep-accent-border); box-shadow: 0 0 0 2px var(--ep-active); }
.ep-field { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.ep-field > label { font-size: var(--fz-sm); color: var(--ep-text-2); font-weight: 600; }
.ep-field-hint { font-size: var(--fz-xs); color: var(--ep-text-mute); }

/* ── Segmented control (Apple-style toggle group) ── */
.ep-seg { display: inline-flex; background: var(--ep-bg-2); border: 1px solid var(--ep-border); border-radius: var(--r-md); padding: 2px; gap: 2px; }
.ep-seg-item {
    display: inline-flex; align-items: center; gap: var(--sp-2);
    padding: 3px var(--sp-5); border-radius: var(--r-sm);
    font-size: var(--fz-sm); color: var(--ep-text-2); cursor: pointer; user-select: none;
    transition: background var(--tr-fast), color var(--tr-fast);
}
.ep-seg-item .material-icons-outlined { font-size: 15px; }
.ep-seg-item:hover { color: var(--ep-text); }
.ep-seg-item.active { background: var(--ep-surface); color: var(--ep-text); box-shadow: var(--sh-1); font-weight: 600; }

/* ── Section header (shared by modals & panels) ── */
.ep-section { font-size: var(--fz-sm); font-weight: 700; color: var(--ep-text-2); text-transform: uppercase; letter-spacing: 0.4px; margin: var(--sp-5) 0 var(--sp-2); padding-bottom: var(--sp-1); border-bottom: 1px solid var(--ep-border-soft); }
.ep-section:first-child { margin-top: var(--sp-2); }

/* ── Modal size variants (use with .ep-modal) ── */
.ep-modal.sm { width: 420px; }
.ep-modal.md { width: 560px; }
.ep-modal.lg { width: 780px; height: 72vh; max-height: 86vh; }
.ep-modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--ep-border); background: var(--ep-panel); }
.ep-modal-foot .sp { flex: 1; }
.ep-modal-head .x { margin-left: auto; cursor: pointer; color: var(--ep-text-mute); font-size: 18px; }
.ep-modal-head .x:hover { color: var(--ep-text); }

/* ════════════════════════════════════════════════════════════
   ROADMAP: not-yet-available control
   Add class "is-stub" to any control with no real handler yet.
   Reads as "planned / coming soon" (faded + soft corner dot),
   NOT as broken — keeps the full P8-style ribbon familiar while
   being honest about what's wired. Clicking shows a roadmap toast.
   To preview a clean "release look" (hide all roadmap markers),
   add class "hide-stubs" to <body>. Grep is-stub to find work left.
   ════════════════════════════════════════════════════════════ */
.is-stub { position: relative; opacity: 0.55; transition: opacity var(--tr-fast); }
.is-stub:hover { opacity: 0.85; }
.is-stub::after {
    content: ""; position: absolute; top: 3px; right: 3px;
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--ep-stub); opacity: 0.7;
    box-shadow: 0 0 0 1.5px var(--ep-bg); pointer-events: none; z-index: 1;
}
body.hide-stubs .is-stub { opacity: 1; }
body.hide-stubs .is-stub::after { display: none; }