/* DT_FEAT_V1 kit v2 (2026-11-12, arena dt_feat_kit_v1): the shared look of the app-feature surfaces. Drop-in for kit v1b:
   same class contract, same DOM, same variables; the base parts keep their v1b layout model (flex rows, wrapping foot and
   card actions), so feature stylesheets written against v1b keep working. New in v2: one type and spacing scale, calmer
   states (unread, selected, pressed, focus, disabled), 16 px fields (no zoom on iPhone), sheet foot that shares the width on
   phones, and the layout rules of the dtf-x-* hooks of the twelve surfaces (see SURFACE_NOTES_v1.md).
   Colours: the panel tokens with literal fallbacks (pages without tokens: question player, central site).
   Dark = html[data-theme="dark"]. ASCII only. Rollback: point the descriptor back to feat-kit-v1b.css. */
:root{
--dtf-ink:var(--dt-color-text,#0b1530);
--dtf-muted:var(--dt-color-muted,#4a5876);
--dtf-surface:var(--v4s-field,#fff);
--dtf-line:var(--dt-color-border,#d9e1f0);
--dtf-acc:var(--dt-color-action,#1354ff);
--dtf-soft:var(--v4s-soft,#f3f6fc);
--dtf-danger:#b42318;
--dtf-ok:#0f6b3f;
--dtf-radius:18px;
--dtf-on-acc:var(--v4s-on-acc,#fff);
--dtf-acc-press:#0f43cc;
--dtf-danger-soft:#fdeeec;
--dtf-mark:#ffe9a6;
--dtf-mark-ink:#0b1530;
--dtf-dim:rgba(11,21,48,.46);
--dtf-shadow:0 18px 48px rgba(11,21,48,.18);
--dtf-r-ctl:12px;
--dtf-font:var(--dt-font-body,Vazirmatn,Tahoma,sans-serif)
}
html[data-theme="dark"]{
--dtf-ink:var(--dt-color-text,#e8eefc);
--dtf-muted:var(--dt-color-muted,#a7b4cf);
--dtf-surface:var(--v4s-field,#1a2740);
--dtf-line:var(--dt-color-border,#2a3a59);
--dtf-acc:var(--dt-color-action,#6f9dff);
--dtf-soft:var(--v4s-soft,#1b2942);
--dtf-danger:#ff9a8f;
--dtf-ok:#7fdcaa;
--dtf-on-acc:var(--v4s-on-acc,#0b1530);
--dtf-acc-press:#8fb3ff;
--dtf-danger-soft:#3a2026;
--dtf-mark:#6b5514;
--dtf-mark-ink:#fff6d6;
--dtf-dim:rgba(0,0,0,.62);
--dtf-shadow:0 18px 48px rgba(0,0,0,.5)
}
html.dtf-noscroll,html.dtf-noscroll body{overflow:hidden}

/* ---------- base parts (kit contract) ---------- */
.dtf-ic{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.dtf-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147481000;background:var(--dtf-dim)}
.dtf-sheet{position:fixed;z-index:2147481001;right:0;left:0;bottom:0;display:flex;flex-direction:column;max-height:88vh;max-height:min(88vh,88dvh);margin:0;padding:0;background:var(--dtf-surface);color:var(--dtf-ink);border:1px solid var(--dtf-line);border-bottom:0;border-radius:22px 22px 0 0;box-shadow:var(--dtf-shadow);font-family:var(--dtf-font);font-size:15px;line-height:1.8;direction:rtl;text-align:right;outline:0;color-scheme:light}
html[data-theme="dark"] .dtf-sheet,html[data-theme="dark"] .dtf-card,html[data-theme="dark"] .dtf-x-tour,html[data-theme="dark"] .dtf-x-lock{color-scheme:dark}
.dtf-sheet-head{flex:0 0 auto;display:flex;align-items:center;gap:12px;min-height:60px;padding:8px 16px;border-bottom:1px solid var(--dtf-line)}
.dtf-sheet-title{flex:1 1 auto;min-width:0;margin:0;font-size:18px;font-weight:800;line-height:1.6;overflow-wrap:anywhere;text-wrap:balance}
.dtf-sheet-x{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:1px solid var(--dtf-line);border-radius:999px;background:transparent;color:var(--dtf-muted);cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.dtf-sheet-x:hover{background:var(--dtf-soft);color:var(--dtf-ink)}
.dtf-sheet-body{flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:16px 16px calc(20px + env(safe-area-inset-bottom,0px))}
.dtf-sheet-foot{flex:0 0 auto;display:flex;flex-wrap:wrap;gap:10px;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--dtf-line)}
.dtf-sheet-foot[hidden]{display:none}
.dtf-sheet-foot>.dtf-btn{flex:1 1 140px}

.dtf-list{display:flex;flex-direction:column;margin:0;padding:0;list-style:none}
.dtf-row{display:flex;align-items:center;gap:12px;min-width:0;padding:12px 0;border-bottom:1px solid var(--dtf-line)}
.dtf-row:last-child{border-bottom:0}
.dtf-row-ic{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--dtf-r-ctl);background:var(--dtf-soft);color:var(--dtf-acc)}
.dtf-row-main{flex:1 1 auto;min-width:0}
.dtf-row-title{margin:0;font-size:15px;font-weight:600;line-height:1.7;overflow-wrap:anywhere}
.dtf-row-sub,.dtf-row-meta{margin:0;color:var(--dtf-muted);font-size:13.5px;line-height:1.8;overflow-wrap:anywhere}
.dtf-row-meta{font-size:12.5px;font-variant-numeric:tabular-nums}
.dtf-row-act{flex:0 0 auto;display:flex;align-items:center;gap:8px}
.dtf-row.is-unread{margin-bottom:4px;border-bottom-color:transparent;background:var(--dtf-soft);box-shadow:8px 0 0 var(--dtf-soft),-8px 0 0 var(--dtf-soft)}
.dtf-row.is-unread .dtf-btn--quiet{background:var(--dtf-surface)}
.dtf-row.is-unread .dtf-row-title{font-weight:800}
.dtf-row.is-unread .dtf-row-title::before{content:"";display:inline-block;width:8px;height:8px;margin-inline-end:8px;border-radius:50%;background:var(--dtf-acc);vertical-align:middle}
.dtf-row.is-unread .dtf-row-ic{background:var(--dtf-surface)}

.dtf-card{min-width:0;padding:16px;background:var(--dtf-surface);color:var(--dtf-ink);border:1px solid var(--dtf-line);border-radius:var(--dtf-radius);font-family:var(--dtf-font);font-size:15px;line-height:1.8;direction:rtl;text-align:right;color-scheme:light}
.dtf-card-title{margin:0 0 4px;font-size:16px;font-weight:800;line-height:1.6;text-wrap:balance}
.dtf-card-text{margin:0;color:var(--dtf-muted);font-size:14px}
.dtf-card-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}

.dtf-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 18px;border:1px solid var(--dtf-line);border-radius:999px;background:var(--dtf-surface);color:var(--dtf-ink);font:inherit;font-size:14px;font-weight:700;line-height:1.4;cursor:pointer;text-decoration:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.dtf-btn .dtf-ic{width:20px;height:20px}
.dtf-btn:hover{border-color:var(--dtf-muted)}
.dtf-btn:active{background:var(--dtf-soft)}
.dtf-btn--pri{background:var(--dtf-acc);border-color:var(--dtf-acc);color:var(--dtf-on-acc)}
.dtf-btn--pri:hover,.dtf-btn--pri:active{background:var(--dtf-acc-press);border-color:var(--dtf-acc-press)}
.dtf-btn--ghost{background:transparent}
.dtf-btn--quiet{border-color:transparent;background:var(--dtf-soft);color:var(--dtf-acc)}
.dtf-btn--quiet:hover{border-color:var(--dtf-acc)}
.dtf-btn--danger{border-color:currentColor;background:transparent;color:var(--dtf-danger)}
.dtf-btn--danger:hover,.dtf-btn--danger:active{border-color:currentColor;background:var(--dtf-danger-soft)}
.dtf-btn[disabled],.dtf-btn[aria-disabled="true"]{opacity:.55;cursor:default;pointer-events:none}

.dtf-chip{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;min-width:44px;padding:0 14px;border:1px solid var(--dtf-line);border-radius:999px;background:transparent;color:var(--dtf-muted);font:inherit;font-size:13.5px;font-weight:700;line-height:1.4;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;transition:background-color .15s ease,border-color .15s ease,color .15s ease}
.dtf-chip:hover{border-color:var(--dtf-muted);color:var(--dtf-ink)}
.dtf-chip.is-on{border-color:var(--dtf-acc);background:var(--dtf-soft);color:var(--dtf-acc);box-shadow:inset 0 0 0 1px var(--dtf-acc)}
.dtf-seg{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 12px}
.dtf-badge{display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:999px;background:var(--dtf-soft);color:var(--dtf-acc);font-size:12px;font-weight:700;line-height:1.4;white-space:nowrap}
.dtf-empty,.dtf-busy{margin:0;padding:28px 8px;color:var(--dtf-muted);font-size:14px;text-align:center}
.dtf-note{margin:0 0 12px;padding:10px 12px;border-radius:var(--dtf-r-ctl);background:var(--dtf-soft);color:var(--dtf-muted);font-size:13px;line-height:1.8}
.dtf-field{display:block;width:100%;min-width:0;min-height:44px;padding:8px 12px;border:1px solid var(--dtf-line);border-radius:var(--dtf-r-ctl);background:var(--dtf-surface);color:var(--dtf-ink);font:inherit;font-size:16px;line-height:1.7}
.dtf-field::placeholder{color:var(--dtf-muted);opacity:.85}
.dtf-field:focus{border-color:var(--dtf-acc)}
.dtf-switch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;cursor:pointer;-webkit-tap-highlight-color:transparent}
.dtf-switch input{position:absolute;opacity:0;width:1px;height:1px}
.dtf-switch input+span{position:relative;flex:0 0 auto;width:46px;height:28px;border-radius:999px;background:var(--dtf-line);box-shadow:inset 0 0 0 1px rgba(110,125,155,.55);transition:background-color .15s ease}
.dtf-switch input+span::after{content:"";position:absolute;top:3px;inset-inline-start:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(11,21,48,.25);transition:inset-inline-start .15s ease}
.dtf-switch input:checked+span{background:var(--dtf-acc);box-shadow:none}
.dtf-switch input:checked+span::after{inset-inline-start:21px}
.dtf-switch input:disabled+span{opacity:.55}

/* focus: a ring for the keyboard, none for touch; browsers without :focus-visible keep the ring */
.dtf-btn:focus,.dtf-chip:focus,.dtf-sheet-x:focus,.dtf-field:focus,.dtf-x-tap:focus,.dtf-x-cov-cell:focus,.dtf-x-w-btn:focus,.dtf-x-range-in:focus,.dtf-switch input:focus+span{outline:3px solid var(--dtf-acc);outline-offset:2px}
.dtf-btn:focus:not(:focus-visible),.dtf-chip:focus:not(:focus-visible),.dtf-sheet-x:focus:not(:focus-visible),.dtf-x-tap:focus:not(:focus-visible),.dtf-x-cov-cell:focus:not(:focus-visible),.dtf-x-w-btn:focus:not(:focus-visible),.dtf-x-range-in:focus:not(:focus-visible),.dtf-switch input:focus:not(:focus-visible)+span{outline:0}
.dtf-field:focus{outline-width:2px;outline-offset:1px}

@media (min-width:760px){
.dtf-sheet{top:50%;bottom:auto;right:0;left:0;width:560px;width:min(560px,calc(100vw - 48px));max-height:80vh;max-height:min(80vh,720px);margin-inline:auto;transform:translateY(-50%);border-bottom:1px solid var(--dtf-line);border-radius:22px}
.dtf-sheet--wide{width:960px;width:min(960px,calc(100vw - 48px))}
.dtf-sheet-head{padding:8px 24px}
.dtf-sheet-body{padding:20px 24px 24px}
.dtf-sheet-foot{padding:14px 24px}
.dtf-sheet-foot>.dtf-btn{flex:0 1 auto;min-width:148px}
.dtf-card{padding:20px}
}
@media (prefers-reduced-motion:no-preference){
.dtf-sheet{animation:dtf-sheet-in .2s cubic-bezier(.23,1,.32,1)}
.dtf-scrim{animation:dtf-fade-in .2s ease-out}
}
@keyframes dtf-sheet-in{from{opacity:0}to{opacity:1}}
@keyframes dtf-fade-in{from{opacity:0}to{opacity:1}}

/* ---------- layout hooks of the twelve surfaces (dtf-x-*) ---------- */
.dtf-x-label{display:block;margin:16px 0 8px;color:var(--dtf-muted);font-size:13px;font-weight:700;line-height:1.6}
.dtf-sheet-body>.dtf-x-label:first-child,.dtf-x-set>.dtf-x-label:first-child,.dtf-x-nb-filters>.dtf-x-label:first-child{margin-top:0}
.dtf-x-count,.dtf-x-hint{margin:0 0 8px;color:var(--dtf-muted);font-size:13px;line-height:1.8;font-variant-numeric:tabular-nums}
.dtf-x-tap{cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:var(--dtf-r-ctl)}
@media (hover:hover){.dtf-x-tap:hover .dtf-row-title{color:var(--dtf-acc)}}

/* 1 inbox */
.dtf-x-inbox-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin:0 0 4px}
.dtf-x-inbox-top .dtf-seg,.dtf-x-inbox-top .dtf-x-count{margin:0}
.dtf-x-inbox .dtf-row{flex-wrap:wrap;align-items:flex-start}
.dtf-x-inbox .dtf-row-main{flex:1 1 0}
.dtf-x-inbox .dtf-row-act{flex:1 0 100%;padding-inline-start:52px}
.dtf-x-kind-security .dtf-row-ic,.dtf-row.is-unread.dtf-x-kind-security .dtf-row-ic{background:var(--dtf-surface);box-shadow:inset 0 0 0 1.5px var(--dtf-acc)}
/* 2 devices */
.dtf-x-current .dtf-row-ic{background:var(--dtf-acc);color:var(--dtf-on-acc)}
/* 3 news card + 6 plan card */
.dtf-x-news-head,.dtf-x-plan-head{display:flex;align-items:center;justify-content:space-between;gap:10px}
.dtf-x-news-head .dtf-card-title,.dtf-x-plan-head .dtf-card-title{margin:0}
.dtf-x-news .dtf-card-text,.dtf-x-plan .dtf-card-text{margin-top:4px}
.dtf-x-news-list{display:grid;gap:8px;margin:12px 0 0;padding:0;list-style:none}
.dtf-x-news-list li{display:flex;align-items:flex-start;gap:10px;min-width:0;font-size:14px;line-height:1.8;overflow-wrap:anywhere}
.dtf-x-news-list .dtf-ic{width:18px;height:18px;margin-top:4px;color:var(--dtf-acc)}
.dtf-x-oncall{margin:12px 0 10px;padding:8px 14px;border:1px solid var(--dtf-line);border-radius:14px;background:var(--dtf-soft);font-size:15px;font-weight:700}
.dtf-x-plan.is-oncall .dtf-x-oncall{border-color:var(--dtf-acc)}
.dtf-x-plan-list{margin-top:4px}
/* 4 tour */
.dtf-x-tour-scrim{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147481000}
.dtf-x-spot{position:fixed;z-index:2147481001;box-sizing:border-box;border-radius:999px;box-shadow:0 0 0 3px var(--dtf-surface),0 0 0 9999px var(--dtf-dim);pointer-events:none}
.dtf-x-tour{position:fixed;z-index:2147481002;box-sizing:border-box;top:var(--dtf-x-top,96px);left:var(--dtf-x-left,16px);width:var(--dtf-x-w,328px);max-width:calc(100vw - 32px);padding:16px;background:var(--dtf-surface);color:var(--dtf-ink);border:1px solid var(--dtf-line);border-radius:var(--dtf-radius);box-shadow:var(--dtf-shadow);font-family:var(--dtf-font);font-size:15px;line-height:1.8;direction:rtl;text-align:right;color-scheme:light}
.dtf-x-tour::before{content:"";position:absolute;top:-7px;left:calc(var(--dtf-x-arrow,40px) - 7px);width:12px;height:12px;background:var(--dtf-surface);border:1px solid var(--dtf-line);border-bottom:0;border-right:0;transform:rotate(45deg)}
.dtf-x-tour-step{margin:0 0 2px;color:var(--dtf-muted);font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums}
.dtf-x-tour-title{margin:0;font-size:16px;font-weight:800;line-height:1.6}
.dtf-x-tour-text{margin:4px 0 0;color:var(--dtf-muted);font-size:14px}
.dtf-x-tour-dots{display:flex;gap:6px;margin:12px 0}
.dtf-x-tour-dots i{width:8px;height:8px;border-radius:50%;background:var(--dtf-line)}
.dtf-x-tour-dots i.is-on{width:20px;border-radius:999px;background:var(--dtf-acc)}
.dtf-x-tour-act{display:flex;flex-wrap:wrap;gap:8px}
.dtf-x-tour-act .dtf-btn{flex:1 1 0}
.dtf-x-tour-act .dtf-btn--quiet{order:3;flex:1 0 100%;min-height:44px;background:transparent}
/* 5 coverage map: one colour, three shapes (bar = read, dot = reviewed, square = tested) */
.dtf-x-cov .dtf-card-text{max-width:72ch}
.dtf-x-cov-n{display:block}
.dtf-x-cov-sum{margin:10px 0 0;font-size:14px;font-weight:700;font-variant-numeric:tabular-nums}
.dtf-x-cov-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 4px;padding:10px 12px;list-style:none;border-radius:var(--dtf-r-ctl);background:var(--dtf-soft);color:var(--dtf-muted);font-size:13px}
.dtf-x-cov-key{display:inline-flex;align-items:center;gap:8px}
.dtf-x-cov-swatch,.dtf-x-cov-tot::before{flex:0 0 auto;display:inline-block;width:12px;height:4px;border-radius:2px;background:var(--dtf-acc)}
.dtf-x-cov-key[data-k="rev"] .dtf-x-cov-swatch,.dtf-x-cov-tot[data-k="rev"]::before{width:7px;height:7px;border-radius:50%}
.dtf-x-cov-key[data-k="test"] .dtf-x-cov-swatch,.dtf-x-cov-tot[data-k="test"]::before{width:7px;height:7px;border-radius:1px}
.dtf-x-cov-key[data-k="none"] .dtf-x-cov-swatch{width:14px;height:14px;border:1px solid var(--dtf-line);border-radius:4px;background:var(--dtf-surface)}
.dtf-x-cov-books{display:grid;grid-template-columns:minmax(0,1fr);gap:8px 32px}
.dtf-x-cov-book{min-width:0;padding:16px 0 4px;border-top:1px solid var(--dtf-line)}
.dtf-x-cov-book:first-child{border-top:0}
.dtf-x-cov-bookhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px}
.dtf-x-cov-name{margin:0;font-size:16px;font-weight:800;line-height:1.6}
.dtf-x-cov-ed{color:var(--dtf-muted);font-size:13px;font-variant-numeric:tabular-nums}
.dtf-x-cov-totals{flex:1 0 100%;display:flex;flex-wrap:wrap;gap:2px 16px;margin:2px 0 0;color:var(--dtf-muted);font-size:13px;font-variant-numeric:tabular-nums}
.dtf-x-cov-tot{display:inline-flex;align-items:center;gap:6px}
.dtf-x-cov-tot::before{content:""}
.dtf-x-cov-bar{height:6px;margin:10px 0 12px;border-radius:999px;background:var(--dtf-soft);overflow:hidden}
.dtf-x-cov-fill{display:block;height:100%;border-radius:999px;background:var(--dtf-acc)}
.dtf-x-cov-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(44px,1fr));gap:6px;margin:0;padding:0;list-style:none}
.dtf-x-cov-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;min-height:46px;border:1px solid var(--dtf-line);border-radius:10px;background:transparent;color:var(--dtf-muted);font-size:13px;font-weight:600;line-height:1.2;text-decoration:none;font-variant-numeric:tabular-nums;-webkit-tap-highlight-color:transparent}
.dtf-x-cov-cell.is-read{background:var(--dtf-soft);color:var(--dtf-ink);font-weight:800}
.dtf-x-cov-cell:hover{border-color:var(--dtf-acc)}
.dtf-x-cov-pips{display:flex;align-items:center;gap:3px;height:7px}
.dtf-x-cov-pips i{display:block;box-sizing:border-box;width:9px;height:3px;border-radius:2px;background:var(--dtf-line)}
.dtf-x-cov-pips i:nth-child(2){width:6px;height:6px;border-radius:50%;background:transparent;border:1px solid var(--dtf-line)}
.dtf-x-cov-pips i:nth-child(3){width:6px;height:6px;border-radius:1px;background:transparent;border:1px solid var(--dtf-line)}
.dtf-x-cov-cell.is-read .dtf-x-cov-pips i:nth-child(1),.dtf-x-cov-cell.is-rev .dtf-x-cov-pips i:nth-child(2),.dtf-x-cov-cell.is-test .dtf-x-cov-pips i:nth-child(3){background:var(--dtf-acc);border-color:var(--dtf-acc)}
/* 7 notebook */
.dtf-x-nb{display:grid;grid-template-columns:minmax(0,1fr);gap:16px}
.dtf-x-nb-filters,.dtf-x-nb-results{min-width:0}
.dtf-x-nb-filters .dtf-seg{margin-bottom:0}
.dtf-x-search{position:relative;display:block;color:var(--dtf-muted)}
.dtf-x-search .dtf-ic{position:absolute;top:50%;inset-inline-start:12px;width:20px;height:20px;margin-top:-10px;pointer-events:none}
.dtf-x-search .dtf-field{padding-inline-start:42px}
.dtf-x-dot{flex:0 0 auto;width:12px;height:12px;border-radius:50%;background:#e9b93c}
.dtf-x-color[data-c="green"] .dtf-x-dot{background:#2f9e6b}
.dtf-x-color[data-c="pink"] .dtf-x-dot{background:#e0668f}
.dtf-x-color[data-c="blue"] .dtf-x-dot{background:#3b82f6}
.dtf-x-hit{padding:0 3px;border-radius:4px;background:var(--dtf-mark);color:var(--dtf-mark-ink);font-weight:inherit}
.dtf-x-nb-results .dtf-row[data-c]{padding-inline-start:10px;border-inline-start:3px solid #e9b93c}
.dtf-x-nb-results .dtf-row[data-c="green"]{border-inline-start-color:#2f9e6b}
.dtf-x-nb-results .dtf-row[data-c="pink"]{border-inline-start-color:#e0668f}
.dtf-x-nb-results .dtf-row[data-c="blue"]{border-inline-start-color:#3b82f6}
/* 8 readability */
.dtf-x-set{margin:0;padding:0 0 14px}
.dtf-x-set+.dtf-x-set{padding-top:14px;border-top:1px solid var(--dtf-line)}
.dtf-x-set .dtf-seg{margin:0}
.dtf-x-set .dtf-x-hint{margin:0}
.dtf-x-range{display:flex;align-items:center;gap:12px;color:var(--dtf-ink)}
.dtf-x-range-in{flex:1 1 auto;min-width:0;height:44px;margin:0;accent-color:var(--dtf-acc);cursor:pointer;touch-action:pan-y}
.dtf-x-range-a{flex:0 0 auto;font-size:14px;font-weight:700}
.dtf-x-range-b{flex:0 0 auto;font-size:22px;font-weight:700;line-height:1.2}
.dtf-x-preview{padding-top:14px;border-top:1px solid var(--dtf-line)}
.dtf-x-preview-text{padding:12px 14px;border:1px solid var(--dtf-line);border-radius:var(--dtf-r-ctl);background:var(--dtf-surface);color:var(--dtf-ink)}
.dtf-x-preview-text p{position:relative;z-index:1;margin:0}
.dtf-x-ruler{display:block;box-sizing:border-box;background:rgba(19,84,255,.1);border-top:1px solid rgba(19,84,255,.35);border-bottom:1px solid rgba(19,84,255,.35);pointer-events:none}
html[data-theme="dark"] .dtf-x-ruler{background:rgba(111,157,255,.14);border-color:rgba(111,157,255,.45)}
.dtf-x-ruler[hidden]{display:none}
.dtf-x-picked{border-radius:4px;background:rgba(19,84,255,.12);box-shadow:0 1px 0 var(--dtf-acc)}
html[data-theme="dark"] .dtf-x-picked{background:rgba(111,157,255,.2)}
/* 9 privacy cover */
.dtf-x-lock{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147481100;display:flex;align-items:center;justify-content:center;box-sizing:border-box;padding:24px 24px calc(24px + env(safe-area-inset-bottom,0px));overflow:auto;background:var(--dtf-surface);color:var(--dtf-ink);font-family:var(--dtf-font);font-size:15px;line-height:1.8;direction:rtl;text-align:center;color-scheme:light}
.dtf-x-lock-box{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;max-width:380px;margin:auto}
.dtf-x-lock-ic{display:inline-flex;align-items:center;justify-content:center;width:64px;height:64px;margin-bottom:4px;border-radius:50%;background:var(--dtf-soft);color:var(--dtf-acc)}
.dtf-x-lock-ic .dtf-ic{width:28px;height:28px}
.dtf-x-lock-title{margin:0;font-size:20px;font-weight:800;line-height:1.6;text-wrap:balance}
.dtf-x-lock-text{margin:0 0 10px;color:var(--dtf-muted);font-size:15px}
.dtf-x-lock-box .dtf-btn{width:100%;max-width:300px;min-height:48px}
.dtf-x-lock-fine{margin:6px 0 0;color:var(--dtf-muted);font-size:13px}
/* 10 passkeys: remove confirm */
.dtf-row.is-asking{border-bottom-color:transparent;padding-bottom:6px}
.dtf-x-confirm{margin:0 0 10px;padding:12px;border-radius:var(--dtf-r-ctl);background:var(--dtf-soft);color:var(--dtf-ink)}
.dtf-x-confirm-text{display:block;margin:0 0 10px;font-size:14px;font-weight:600}
.dtf-x-confirm-act{display:flex;flex-wrap:wrap;gap:8px}
.dtf-x-confirm-act .dtf-btn{flex:1 1 0}
/* 11 report */
.dtf-x-quote{margin:0;padding:12px 14px;border-inline-start:3px solid var(--dtf-acc);border-radius:var(--dtf-r-ctl);background:var(--dtf-soft)}
.dtf-x-quote-text{margin:0;font-size:15px;line-height:1.9;overflow-wrap:anywhere}
.dtf-x-quote-src{display:block;margin-top:6px;color:var(--dtf-muted);font-size:13px;font-style:normal;font-variant-numeric:tabular-nums}
.dtf-x-area{min-height:92px;margin-bottom:12px;resize:vertical}
/* 12 Android widget (static mock; the numbers for the native build are in SURFACE_NOTES_v1.md) */
.dtf-x-home{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:16px;padding:20px 12px;border-radius:24px;background:#c9d6ee}
html[data-theme="dark"] .dtf-x-home{background:#0a111f}
.dtf-x-widget{box-sizing:border-box;display:grid;gap:8px 12px;align-content:space-between;padding:14px 16px;border-radius:22px;background:var(--dtf-surface);color:var(--dtf-ink);font-family:var(--dtf-font);line-height:1.5;direction:rtl;text-align:right}
.dtf-x-widget--4x2{width:328px;max-width:100%;min-height:156px;grid-template-columns:minmax(0,1fr) auto}
.dtf-x-widget--2x2{width:156px;min-height:156px;grid-template-columns:minmax(0,1fr)}
.dtf-x-w-count{min-width:0}
.dtf-x-w-num{display:block;font-size:30px;font-weight:800;line-height:1.15;font-variant-numeric:tabular-nums}
.dtf-x-w-cap{display:block;color:var(--dtf-muted);font-size:12.5px}
.dtf-x-w-today{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 8px;min-width:0}
.dtf-x-w-label{font-size:13px;font-weight:700}
.dtf-x-w-left{color:var(--dtf-muted);font-size:12.5px;font-variant-numeric:tabular-nums}
.dtf-x-w-bar{flex:1 0 100%;display:block;height:5px;margin-top:2px;border-radius:999px;background:var(--dtf-soft);overflow:hidden}
.dtf-x-w-fill{display:block;height:100%;border-radius:999px;background:var(--dtf-acc)}
.dtf-x-w-btn{align-self:start;display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 16px;border-radius:999px;background:var(--dtf-acc);color:var(--dtf-on-acc);font-size:14px;font-weight:700;white-space:nowrap;text-decoration:none}
.dtf-x-widget--4x2 .dtf-x-w-count{grid-column:1;grid-row:2}
.dtf-x-widget--4x2 .dtf-x-w-btn{grid-column:2;grid-row:1/3;align-self:center}
.dtf-x-widget--4x2 .dtf-x-w-today{grid-row:3}
.dtf-x-widget--2x2 .dtf-x-w-btn{align-self:end;width:100%}
.dtf-x-w-brand{grid-column:1;grid-row:1;color:var(--dtf-acc);font-size:12px;font-weight:800;line-height:1.3}

@media (min-width:760px){
.dtf-x-nb{grid-template-columns:280px minmax(0,1fr);gap:28px;align-items:start}
.dtf-x-nb-filters{padding-inline-end:28px;border-inline-end:1px solid var(--dtf-line)}
.dtf-x-inbox .dtf-row-act{padding-inline-start:52px}
.dtf-x-home{justify-content:flex-start;padding:28px}
}
@media (min-width:1100px){
.dtf-x-cov-books{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.dtf-x-cov-book:nth-child(2){border-top:0}
.dtf-x-cov-legend{display:inline-flex}
}
