/*
 * HLP editor chrome — every field, card, tree and inspector panel that
 * inspector.js renders. Shared by BOTH hosts: the Customize page's left
 * pane and the sheet the ⚙ badge opens on the main page. It used to live in
 * a <style> block inside settings.html, which meant the sheet on index.html
 * would have rendered the same markup completely unstyled.
 *
 * settings.html keeps its own page-shell rules (the two-column layout, the
 * resizer, the preview pane) inline — those describe that page, not the
 * editor, and a couple of them set html/body layout that must not leak onto
 * the main page.
 */
    .ed-card {
      background: var(--glass); border: 1px solid var(--border);
      border-radius: 14px; padding: 14px 16px; margin: 0;
    }

    /* ---- inspector chrome (back bar, quick actions, section rows) ---- */
    .ed-home__hint {
      color: var(--txt2); font-size: .82rem; margin: 0 0 10px; line-height: 1.4;
    }
    .ed-home .ed-addsec { margin: 0 0 4px; }
    .ed-inspector__bar { margin: 0 0 2px; }
    .ed-inspector__back {
      background: none; border: 0; color: var(--accent); cursor: pointer;
      font: 700 .82rem var(--font); padding: 4px 0;
    }
    .ed-inspector__back:hover { text-decoration: underline; }
    .ed-inspector__quick {
      display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
      margin: 0 0 12px;
    }
    .ed-linkedit--inspector {
      margin: 0; border-radius: 14px; padding-top: 4px;
    }
    .ed-subrow {
      display: flex; align-items: center; gap: 6px;
      padding: 6px 0; border-top: 1px solid rgba(255,255,255,.05);
    }
    .ed-subrow:first-of-type { border-top: 0; }
    .ed-subrow__title {
      flex: 1 1 auto; min-width: 0; font: inherit; font-size: .86rem;
      padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
      background: var(--field-bg); color: var(--txt);
    }
    .ed-subrow__title:focus { outline: none; border-color: var(--accent); }

    /* ---- canvas (preview) selection + add affordances ---- */
    .card--selectable { cursor: pointer; }
    .ed-card > h2 { font: 700 .95rem var(--font); margin: 0 0 4px; }
    .ed-hint { color: var(--txt2); font-size: .8rem; margin: 0 0 10px; }
    .ed-collapsible > summary {
      display: flex; align-items: center; gap: 10px; cursor: pointer; list-style: none;
      color: var(--txt); font: 700 .95rem var(--font); user-select: none;
    }
    .ed-collapsible > summary::-webkit-details-marker { display: none; }
    .ed-collapsible > summary::after { content: '›'; margin-left: auto; color: var(--txt2); font-size: 1.2rem; line-height: 1; transition: transform .15s ease; }
    .ed-collapsible[open] > summary { margin-bottom: 12px; }
    .ed-collapsible[open] > summary::after { transform: rotate(90deg); }
    .ed-collapsible--danger > summary { color: var(--txt2); }
    .ed-collapsible > .btn:last-child { margin-top: 8px; }
    .ed-group {
      font: 700 .68rem var(--mono); text-transform: uppercase; letter-spacing: .08em;
      color: var(--txt2); margin: 14px 0 6px;
    }

    .ed-linkrow {
      display: flex; align-items: center; gap: 10px; padding: 9px 10px;
      border-top: 1px solid rgba(255,255,255,.05); border-radius: 10px;
      transition: background .15s ease, border-color .15s ease;
      cursor: pointer;
    }
    .ed-linkrow:hover { background: rgba(255,255,255,.025); }
    .ed-linkrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .ed-linkrow:first-of-type { border-top: 0; }
    .ed-linkitem.is-editing > .ed-linkrow {
      background: rgba(43,212,180,.07);
      box-shadow: inset 0 0 0 1px rgba(43,212,180,.42);
    }
    .ed-linkrow__icon {
      flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      background: rgba(255,255,255,.06); color: var(--txt);
      box-shadow: inset 0 0 0 1px rgba(255,255,255,.04);
      border: 0; padding: 0; cursor: pointer;
    }
    .ed-linkrow__icon:hover { color: var(--accent); background: rgba(43,212,180,.1); }
    .ed-linkrow__icon:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
    .ed-linkrow__icon .icon { width: 17px; height: 17px; }
    .ed-linkrow__icon img { width: 20px; height: 20px; }
    .ed-linkrow__icon .card__glyph { font: 700 .62rem var(--mono); }
    .ed-linkrow__name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
    .ed-linkrow__title { font-weight: 600; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ed-linkrow__sub { color: var(--txt2); font-size: .74rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ed-linkrow__status { display: flex; gap: 5px; justify-content: flex-start; flex-wrap: wrap; margin-top: 5px; }
    .ed-status {
      display: inline-flex; align-items: center; max-width: 160px; min-height: 22px; padding: 3px 7px;
      border-radius: 7px; font: 600 .66rem var(--font); white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis; border: 1px solid var(--status-line, var(--border));
      color: var(--status-fg, var(--txt2)); background: var(--status-bg, rgba(255,255,255,.035));
    }
    .ed-status--teal { --status-fg: var(--accent); --status-bg: rgba(43,212,180,.1); --status-line: rgba(43,212,180,.38); }
    .ed-status--blue { --status-fg: #8ab4ff; --status-bg: rgba(74,144,255,.12); --status-line: rgba(74,144,255,.36); }
    .ed-status--amber { --status-fg: var(--info-text); --status-bg: rgba(255,198,109,.11); --status-line: rgba(255,198,109,.36); }
    .ed-status--red { --status-fg: var(--outage-text); --status-bg: rgba(255,90,71,.12); --status-line: rgba(255,90,71,.38); }
    .ed-status--gray { --status-fg: var(--txt2); --status-bg: rgba(255,255,255,.04); --status-line: rgba(255,255,255,.1); }
    .ed-linkrow__actions { flex: 0 0 auto; display: flex; gap: 6px; align-items: center; }

    .ed-toggle {
      font: 600 .74rem var(--font); cursor: pointer; padding: 5px 9px; border-radius: 8px;
      background: transparent; color: var(--txt2); border: 1px solid var(--border);
    }
    .ed-toggle:hover { color: var(--txt); border-color: var(--accent); }
    .ed-toggle.is-on { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
    .ed-toggle--hide.is-on { background: rgba(255,90,71,.14); color: var(--outage-text); border-color: rgba(255,90,71,.5); }

    .ed-field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
    .ed-field > span { font-size: .7rem; color: var(--txt2); }
    .ed-field input {
      font: inherit; font-size: .88rem; padding: 7px 9px; border: 1px solid var(--border);
      border-radius: 8px; background: var(--field-bg); color: var(--txt); width: 100%;
    }
    .ed-field input:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

    /* per-link notes — same profile.notes map the main page's edit mode writes */
    .ed-notewarn {
      display: flex; flex-direction: column; gap: 3px; margin: 0 0 9px;
      padding: 9px 11px; border-radius: 9px;
      background: rgba(229,72,77,.10); border: 1px solid rgba(229,72,77,.32);
    }
    .ed-notewarn strong { font-size: .8rem; color: #FF9A9E; }
    .ed-notewarn span { font-size: .74rem; color: var(--txt2); line-height: 1.45; }
    .ed-notebox {
      font: inherit; font-size: .86rem; line-height: 1.5; padding: 8px 10px; width: 100%;
      border: 1px solid var(--border); border-radius: 8px; background: var(--field-bg);
      color: var(--txt); resize: vertical;
    }
    .ed-notebox:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
    .ed-noteflag { margin: 5px 0 0; font-size: .74rem; color: #FF9A9E; min-height: 1em; }
    .ed-noteflag.is-on { font-weight: 600; }

    .ed-netrow { display: flex; flex-wrap: wrap; gap: 8px 10px; align-items: end; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.05); }
    .ed-netrow:first-of-type { border-top: 0; }
    .ed-netrow .ed-field { flex: 1 1 160px; min-width: 140px; }
    .ed-netrow__del {
      align-self: center; font: inherit; cursor: pointer; padding: 6px 10px; border-radius: 8px;
      background: transparent; color: var(--txt2); border: 1px solid var(--border);
    }
    .ed-netrow__del:hover { color: var(--outage-text); border-color: rgba(255,90,71,.5); }
    .ed-provider-defaults { margin-left: 8px; }

    .ed-statrow { display: grid; grid-template-columns: auto minmax(140px,1fr) minmax(150px,1fr); gap: 10px; align-items: end; padding: 10px 0; border-top: 1px solid rgba(255,255,255,.05); }
    .ed-statrow:first-of-type { border-top: 0; }
    .ed-statrow > .ed-inline { align-self: center; }
    .ed-statrow.is-hidden .ed-field { opacity: .45; }
    .ed-statrow--custom { grid-template-columns: minmax(140px,1fr) minmax(150px,1fr) auto; }
    .ed-statrow__del {
      align-self: center; font: inherit; cursor: pointer; padding: 6px 10px; border-radius: 8px;
      background: transparent; color: var(--txt2); border: 1px solid var(--border);
    }
    .ed-statrow__del:hover { color: var(--outage-text); border-color: rgba(255,90,71,.5); }

    .ed-inline { display: flex; gap: 9px; align-items: center; font-size: .88rem; }
    .ed-inline input { width: 16px; height: 16px; accent-color: var(--accent); }
    .ed-card > .ed-inline + .ed-inline { margin-top: 10px; }

    .btn {
      font: 600 .85rem var(--font); cursor: pointer; padding: 8px 14px; border-radius: 9px;
      background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent);
    }
    .btn:hover { background: var(--accent); color: #04120e; }
    .btn--danger { background: transparent; color: var(--outage-text); border-color: rgba(255,90,71,.5); }
    .btn--danger:hover { background: rgba(255,90,71,.14); color: var(--outage-text); }

    .ed-linklike { background: none; border: none; color: var(--accent); font: 600 .82rem var(--font); cursor: pointer; padding: 4px 2px; }
    .ed-linklike:hover { text-decoration: underline; }
    .ed-linklike--danger { color: var(--outage-text); }
    .ed-ok { color: var(--accent); font-size: .85rem; font-weight: 600; }

    /* per-link editor (Advanced) */
    .ed-linkitem { border-top: 1px solid rgba(255,255,255,.05); }
    .ed-linkitem:first-of-type { border-top: 0; }
    .ed-linkitem .ed-linkrow { border-top: 0; }
    .ed-nolink { color: var(--accent); }
    .ed-linkedit {
      margin: 0 10px 12px 45px; padding: 12px 0 0;
      border: 1px solid rgba(43,212,180,.32); border-radius: 12px;
      background: linear-gradient(180deg, rgba(43,212,180,.045), rgba(255,255,255,.018));
      overflow: hidden;
    }
    .ed-linkedit__heading {
      padding: 0 16px 12px; color: var(--txt); font: 700 .88rem var(--font);
    }
    .ed-editgroup {
      padding: 14px 16px; border-top: 1px solid rgba(255,255,255,.065);
    }
    .ed-editgroup__title {
      margin: 0 0 10px; color: var(--txt); font: 700 .8rem var(--font);
    }
    .ed-linkedit__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
    .ed-linkedit__grid .ed-field:first-child { grid-column: 1 / -1; }
    .ed-linkedit__grid--two .ed-field:first-child { grid-column: auto; }
    .ed-linkedit__btns { display: flex; gap: 12px; align-items: center; margin-top: 10px; }
    .ed-linkedit__btns .btn { padding: 6px 12px; font-size: .8rem; }
    .ed-linkedit__footer {
      display: flex; justify-content: flex-end; padding: 12px 16px;
      border-top: 1px solid rgba(255,255,255,.065);
    }
    .ed-trash {
      width: 34px; height: 34px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center;
      background: rgba(255,90,71,.08); color: var(--outage-text); border: 1px solid rgba(255,90,71,.35);
      cursor: pointer;
    }
    .ed-trash:hover { background: rgba(255,90,71,.16); border-color: rgba(255,90,71,.55); }
    .ed-trash:focus-visible { outline: 2px solid var(--outage-text); outline-offset: 2px; }
    .ed-trash svg { width: 17px; height: 17px; }

    /* section header: editable name + reorder + hide */
    .ed-sechead {
      display: flex; align-items: center; gap: 8px; margin: 16px 0 6px;
      padding: 0 4px;
    }
    .ed-sectionicon {
      width: 30px; height: 30px; flex: 0 0 auto; display: grid; place-items: center; padding: 0;
      border: 1px solid var(--border); border-radius: 8px; background: var(--field-bg); color: var(--accent);
      cursor: pointer; appearance: none; -webkit-appearance: none;
    }
    .ed-sectionicon:hover, .ed-sectionicon:focus-visible { border-color: var(--accent); background: var(--accent-soft); outline: none; }
    .ed-sectionicon .icon { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
    .ed-sectionicon img { width: 19px; height: 19px; object-fit: contain; border-radius: 4px; }
    .ed-sectionicon .card__glyph { font-size: 8px; }
    .ed-sechead__title { flex: 1 1 auto; min-width: 0; font: 700 .68rem var(--mono); text-transform: uppercase;
      letter-spacing: .08em; color: var(--txt2); background: transparent; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; }
    .ed-sechead__title:hover { border-color: var(--border); }
    .ed-sechead__title:focus { outline: none; border-color: var(--accent); color: var(--txt); background: rgba(0,0,0,.25); }
    .ed-sechead.is-hidden .ed-sechead__title { opacity: .5; text-decoration: line-through; }
    .ed-sectioncount {
      flex: 0 0 auto; color: var(--txt2); border: 1px solid rgba(255,255,255,.07);
      background: rgba(255,255,255,.025); border-radius: 999px; padding: 3px 8px;
      font: 600 .66rem var(--font);
    }
    .ed-sechead__ctl { flex: 0 0 auto; display: flex; gap: 4px; align-items: center; }
    .ed-move { font: 600 .8rem var(--font); cursor: pointer; padding: 3px 7px; border-radius: 6px; line-height: 1;
      background: transparent; color: var(--txt2); border: 1px solid var(--border); }
    .ed-move:hover:not(:disabled) { color: var(--txt); border-color: var(--accent); }
    .ed-move:disabled { opacity: .28; cursor: default; }
    .ed-reorder { flex: 0 0 auto; display: flex; flex-direction: column; gap: 2px; opacity: .36; transition: opacity .15s ease; }
    .ed-linkrow:hover .ed-reorder, .ed-linkitem.is-editing .ed-reorder { opacity: 1; }
    .ed-reorder .ed-move { padding: 0 5px; font-size: .68rem; }
    .ed-select { font: inherit; font-size: .88rem; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px;
      background: rgba(0,0,0,.25); color: var(--txt); width: 100%; }
    .ed-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
    .ed-emptysec { color: var(--txt2); font-size: .78rem; font-style: italic; padding: 3px 0 5px 40px; }
    .ed-addsec { margin-top: 12px; }
    .ed-addlink { display: block; margin: 2px 0 8px 40px; }
    .ed-deleted {
      margin-top: 16px; padding: 12px; border: 1px solid rgba(255,255,255,.08);
      border-radius: 10px; background: rgba(255,255,255,.025);
    }
    .ed-deleted__head { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
    .ed-deleted__head h3 {
      margin: 0; flex: 1 1 auto; font: 700 .76rem var(--mono); letter-spacing: .08em;
      text-transform: uppercase; color: var(--txt2);
    }
    .ed-deleted__row {
      display: flex; align-items: center; gap: 10px; padding: 8px 0;
      border-top: 1px solid rgba(255,255,255,.055);
    }
    .ed-deleted .ed-hint + .ed-deleted__row { border-top: 0; }
    .ed-deleted__row .ed-linkrow__icon { cursor: default; opacity: .68; }
    .ed-deleted__row .ed-toggle { flex: 0 0 auto; }

    /* drag & drop reordering (Phase 4) */
    .ed-grip { flex: 0 0 auto; cursor: grab; color: var(--txt2); opacity: .25; font-size: 1rem; line-height: 1;
      padding: 2px 3px; border-radius: 5px; user-select: none; -webkit-user-select: none; touch-action: none; }
    .ed-grip:hover { opacity: 1; color: var(--txt); background: rgba(255,255,255,.06); }
    .ed-grip:active { cursor: grabbing; }
    .ed-section { border-radius: 8px; }
    .ed-section.is-dragging { opacity: .6; }
    .ed-section.is-dragging > .ed-sechead { outline: 1px dashed var(--accent); outline-offset: 3px; border-radius: 6px; }
    .ed-seclinks { min-height: 4px; }
    .ed-seclinks--grouped { display: grid; gap: 9px; padding: 7px 0 4px 34px; }
    .ed-subsection { overflow: hidden; border: 1px solid rgba(255,255,255,.08); border-radius: 9px; background: rgba(255,255,255,.018); }
    .ed-subsection__head { display: flex; align-items: center; gap: 7px; min-height: 39px; padding: 5px 7px; border-bottom: 1px solid rgba(255,255,255,.06); }
    .ed-subsection__icon { width: 27px; height: 27px; flex: 0 0 auto; display: grid; place-items: center; padding: 0; border: 1px solid var(--border); border-radius: 7px; background: rgba(255,255,255,.035); color: var(--accent); appearance: none; }
    button.ed-subsection__icon { cursor: pointer; }
    button.ed-subsection__icon:hover { border-color: var(--accent); }
    .ed-subsection__icon .icon { width: 14px; height: 14px; fill: none; stroke: currentColor; }
    .ed-subsection__icon img { width: 17px; height: 17px; object-fit: contain; border-radius: 3px; }
    .ed-subsection__icon .card__glyph { font-size: 8px; }
    .ed-subsection__title { flex: 1 1 auto; min-width: 0; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; background: transparent; color: var(--txt); font: 700 .78rem var(--font); }
    input.ed-subsection__title:hover { border-color: var(--border); }
    input.ed-subsection__title:focus { outline: none; border-color: var(--accent); background: rgba(0,0,0,.18); }
    .ed-subsection__controls { display: flex; align-items: center; gap: 4px; }
    .ed-subsection > .ed-seclinks { min-height: 38px; padding: 2px 7px 5px; }
    .ed-subsection .ed-emptysec { padding-left: 7px; }
    .ed-subsection--other { border-style: dashed; }
    .ed-subsection--other .ed-subsection__head { color: var(--txt2); }
    .ed-addsubsection { margin: 2px 0 8px 6px; }
    .ed-linkitem.is-dragging { opacity: .55; background: rgba(255,255,255,.04); border-radius: 8px; outline: 1px dashed var(--accent); outline-offset: -1px; }
    .ed-linkitem[draggable="true"], .ed-section[draggable="true"] { cursor: grabbing; }
    .ed-linkedit__checks { display: flex; gap: 12px 18px; flex-wrap: wrap; margin-top: 12px; }
    .ed-linkedit__checks .ed-inline { min-height: 24px; }
    .ed-reqbox { margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.06); }
    .ed-reqbox__label { display: block; font-size: .7rem; color: var(--txt2); margin-bottom: 6px; }
    .ed-reqbox__rows { display: flex; flex-direction: column; gap: 6px; }
    .ed-reqrow { display: flex; gap: 6px; align-items: center; }
    .ed-reqrow__label { flex: 1 1 auto; min-width: 0; font: 600 .78rem var(--mono); padding: 6px 9px; border-radius: 8px;
      border: 1px solid var(--rq-line, var(--border)); background: var(--rq-bg, rgba(0,0,0,.25)); color: var(--rq-fg, var(--txt)); }
    .ed-reqrow__color { flex: 0 0 92px; }
    .ed-reqrow__del { flex: 0 0 auto; font: inherit; cursor: pointer; padding: 5px 9px; border-radius: 8px; background: transparent; color: var(--txt2); border: 1px solid var(--border); }
    .ed-reqrow__del:hover { color: var(--outage-text); border-color: rgba(255,90,71,.5); }
    .ed-folderhint { margin: -3px 0 10px; color: var(--txt2); font-size: .76rem; line-height: 1.45; }
    .ed-fieldnote { display: block; margin-top: 4px; color: var(--txt2); font-size: .72rem; line-height: 1.4; }
    .ed-linkedit__grid--two .ed-field:has(.ed-fieldnote) { grid-column: 1 / -1; }
    .ed-filetree__toolbar { display: flex; align-items: center; gap: 5px; margin-bottom: 8px; }
    .ed-filetree { display: grid; grid-template-columns: minmax(190px,.9fr) minmax(210px,1.1fr); border: 1px solid rgba(255,255,255,.1); border-radius: 10px; overflow: hidden; background: rgba(0,0,0,.14); }
    .ed-filetree__browser { position: relative; min-height: 190px; max-height: 390px; overflow: auto; padding: 7px; border-right: 1px solid rgba(255,255,255,.09); }
    .ed-filetree__rootdrop { position: absolute; z-index: 3; top: 7px; left: 7px; right: 7px; padding: 6px; border: 1px dashed rgba(43,212,180,.45); border-radius: 7px; color: var(--txt2); background: var(--panel); text-align: center; font-size: .68rem; opacity: 0; pointer-events: none; }
    .is-dragging .ed-filetree__rootdrop { opacity: 1; pointer-events: auto; }
    .ed-filetree__rootdrop.is-over { color: var(--accent); background: rgba(43,212,180,.1); border-color: var(--accent); }
    .ed-filetree__list { display: grid; gap: 1px; }
    .ed-filetree__list--nested { margin-left: 12px; padding-left: 8px; border-left: 1px solid rgba(255,255,255,.09); }
    .ed-filetree__row { position: relative; display: flex; align-items: center; gap: 6px; min-height: 31px; padding: 3px 5px 3px 2px; border: 1px solid transparent; border-radius: 7px; color: var(--txt2); cursor: grab; user-select: none; -webkit-user-select: none; touch-action: none; }
    .ed-filetree__row:hover { background: rgba(255,255,255,.045); color: var(--txt); }
    .ed-filetree__row:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
    .ed-filetree__row.is-selected { color: var(--txt); background: rgba(43,212,180,.09); border-color: rgba(43,212,180,.34); }
    .ed-filetree__row.is-drag-source { opacity: .52; outline: 1px dashed var(--accent); outline-offset: -2px; cursor: grabbing; }
    .ed-filetree__row.is-drop-before { box-shadow: inset 0 2px 0 var(--accent); }
    .ed-filetree__row.is-drop-after { box-shadow: inset 0 -2px 0 var(--accent); }
    .ed-filetree__row.is-drop-inside { color: var(--accent); background: rgba(43,212,180,.16); border-color: var(--accent); }
    .ed-filetree__disclosure { flex: 0 0 20px; width: 20px; height: 20px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 5px; background: transparent; color: var(--txt2); font: 700 1rem/1 var(--font); cursor: pointer; transition: transform .12s ease; }
    .ed-filetree__disclosure:disabled { cursor: default; }
    .ed-filetree__disclosure.is-open { transform: rotate(90deg); }
    .ed-filetree__icon { position: relative; flex: 0 0 auto; display: inline-block; }
    .ed-filetree__icon--folder { width: 17px; height: 12px; margin-top: 2px; border-radius: 2px; background: #e2ad4d; box-shadow: inset 0 1px 0 rgba(255,255,255,.24); }
    .ed-filetree__icon--folder::before { content: ''; position: absolute; left: 1px; top: -3px; width: 8px; height: 4px; border-radius: 2px 2px 0 0; background: #e2ad4d; }
    .ed-filetree__icon--file { width: 13px; height: 16px; border: 1px solid #8eb8e8; border-radius: 2px; background: rgba(142,184,232,.12); }
    .ed-filetree__icon--file::after { content: ''; position: absolute; right: 2px; top: 3px; width: 6px; height: 1px; background: #8eb8e8; box-shadow: 0 3px 0 #8eb8e8, 0 6px 0 #8eb8e8; opacity: .72; }
    .ed-filetree__name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .78rem; }
    .ed-filetree__tabmark { flex: 0 0 auto; padding: 2px 4px; border: 1px solid rgba(142,184,232,.35); border-radius: 4px; color: #8eb8e8; font: 700 .5rem var(--mono); letter-spacing: .05em; }
    .ed-filetree__star { flex: 0 0 auto; color: #ffcf67; font-size: .7rem; }
    .ed-filetree__linked { flex: 0 0 auto; color: var(--accent); font-size: .68rem; }
    .ed-filetree__row:active { cursor: grabbing; }
    .ed-filemeta { min-width: 0; padding: 11px; }
    .ed-filemeta__type { margin-bottom: 9px; color: var(--accent); font: 700 .65rem var(--mono); letter-spacing: .08em; text-transform: uppercase; }
    .ed-filemeta__starrow { display: flex; align-items: center; gap: 9px; margin: 0 0 9px; }
    .ed-filemeta__star { width: 32px; height: 32px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,207,103,.38); border-radius: 8px; background: rgba(255,207,103,.06); color: #ffcf67; font: 400 1.35rem/1 var(--font); cursor: pointer; }
    .ed-filemeta__star:hover, .ed-filemeta__star:focus-visible { border-color: #ffcf67; background: rgba(255,207,103,.13); outline: none; }
    .ed-filemeta__star[aria-pressed="true"] { background: rgba(255,207,103,.16); box-shadow: 0 0 0 1px rgba(255,207,103,.12); }
    .ed-filemeta__starlabel { color: var(--txt); font-size: .78rem; }
    .ed-filemeta > .ed-inline { margin: 0 0 8px; }
    .ed-filemeta__note { margin: -3px 0 8px; color: var(--info-text); font-size: .7rem; }
    .ed-filemeta > .ed-field { margin-bottom: 8px; }
    .ed-filemeta__empty { margin: 0; color: var(--txt2); font-size: .76rem; }
    .ed-filemeta__actions { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 8px; }
    .ed-folderbtn { font: 600 .72rem var(--font); cursor: pointer; padding: 5px 8px; border-radius: 7px; background: rgba(255,255,255,.035); color: var(--txt2); border: 1px solid var(--border); }
    .ed-folderbtn:hover { color: var(--accent); border-color: var(--accent); background: rgba(43,212,180,.07); }
    .ed-folderbtn--danger { margin-left: auto; color: var(--outage-text); border-color: rgba(255,90,71,.28); }
    .ed-folderbtn--danger:hover { color: var(--outage-text); border-color: rgba(255,90,71,.55); background: rgba(255,90,71,.1); }

    [data-theme="light"] .set-editor { background: #F6F8FB; }
    [data-theme="light"] .set-preview { background: #F1F4F8; }
    [data-theme="light"] .ed-select,
    [data-theme="light"] .ed-linkedit,
    [data-theme="light"] .ed-filetree { background: var(--field-bg); }

    @media (max-width: 620px) {
      .ed-statrow { grid-template-columns: auto 1fr; }
      .ed-statrow > .ed-field:last-child { grid-column: 2; }
      .ed-statrow--custom { grid-template-columns: 1fr auto; }
      .ed-linkrow { align-items: flex-start; flex-wrap: wrap; }
      .ed-linkrow__name { flex-basis: calc(100% - 94px); }
      .ed-linkrow__status { padding-left: 0; }
      .ed-linkrow__actions { margin-left: 51px; }
      .ed-linkedit { margin-left: 0; }
      .ed-linkedit__grid, .ed-linkedit__grid--two { grid-template-columns: 1fr; }
      .ed-linkedit__grid .ed-field:first-child, .ed-linkedit__grid--two .ed-field:first-child { grid-column: auto; }
      .ed-filetree { grid-template-columns: 1fr; }
      .ed-filetree__browser { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.09); max-height: 320px; }
    }