/*
 * Purpose
 * The look of every admin screen: dark chrome with grouped navigation, count badges, and section
 * tabs, forms, lists, overview, split editors with live preview, the builder studio (toolbar,
 * Pages/Add/Layers panel, canvas, settings panel, preview mode, Publish dialog), design panel,
 * quick-add picker, save notices, media library, publishing, security, command palette, and the
 * Frameworks section (ranking table, framework editor, review list, comments, labs, email).
 *
 * Communication / relationships
 * Served at /static/admin.css by admin/server.py and linked by screens/layout.py. Class names come
 * from admin/screens/* and admin/assets/admin.js.
 *
 * Settings / parameters
 * Studio columns: 270 px left panel, flexible canvas, 360 px settings (narrower below 1300 px,
 * stacked below 1000 px); either side collapses to 0 (body.hide-left / hide-right / previewing).
 * Framework editor: form plus a 380 px side column, stacked below 1100 px.
 *
 * Edge cases
 * The security policy forbids inline styles, so every admin visual lives here.
 *
 * Known limitations
 * Dark theme only.
 *
 * Examples
 * <a class="button small ghost" href="/pages">Pages</a>
 */
*{box-sizing:border-box}
body{margin:0;background:#090909;color:#a3a3a3;font:14px "Segoe UI",Arial,sans-serif;line-height:1.5}
a{color:#ddd}code{background:#1d1d1d;padding:1px 5px;color:#ddd}
.adminbar{position:sticky;top:0;z-index:20;background:#131313;border-bottom:1px solid #242424;padding:12px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{color:#eee;font-weight:700;letter-spacing:1.4px;white-space:nowrap}.brand span{color:#666;font-weight:400;letter-spacing:0;margin-left:6px}
.adminnav{display:flex;gap:2px;flex-wrap:wrap;flex:1}
.adminnav a{color:#999;text-decoration:none;padding:7px 10px;border-radius:4px;white-space:nowrap}
.adminnav a:hover,.adminnav a.active{background:#262626;color:#fff}
.logout{margin:0}.adminmain{max-width:1680px;margin:0 auto;padding:30px 24px 80px}
h1,h2{font-family:Georgia,"Times New Roman",serif;font-weight:400;color:#bdbdbd}h1{font-size:32px;margin:0 0 10px}h2{font-size:22px;margin:28px 0 12px}
.flash{background:#14261a;border:1px solid #2c5a37;color:#b9e6c3;padding:11px 16px;margin-bottom:20px}
.error{color:#ff9f9f;background:#2a1414;border:1px solid #5a2c2c;padding:10px 14px}
.help{color:#777;font-size:13px}.empty{color:#777;padding:20px}
.titlebar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:20px;flex-wrap:wrap}.titlebar form{margin:0}
.card{background:#141414;border:1px solid #272727;padding:22px}
.field{display:block;margin:0 0 17px}.field span{display:block;color:#d0d0d0;margin-bottom:6px}.field small{display:block;color:#707070;margin-top:5px}
input,textarea,select{width:100%;background:#0b0b0b;color:#e2e2e2;border:1px solid #363636;padding:10px 11px;font:inherit;border-radius:3px}
input:focus,textarea:focus,select:focus{outline:none;border-color:#8a8a8a}
textarea{resize:vertical;line-height:1.55}
fieldset{border:1px solid #2a2a2a;margin:0 0 18px;padding:16px 18px}legend{color:#ddd;padding:0 8px}
button,.button{display:inline-block;background:#ececec;color:#111;border:0;padding:10px 17px;font:inherit;font-weight:700;text-decoration:none;cursor:pointer;border-radius:3px}
button:hover,.button:hover{background:#fff}button:disabled{opacity:.45;cursor:not-allowed}
.small{padding:6px 11px;font-size:13px}.ghost{background:#252525;color:#ddd}.ghost:hover{background:#333}
.danger{background:#4a1f1f;color:#fff}.danger:hover{background:#6a2a2a}
.back{display:inline-block;margin-bottom:12px;text-decoration:none;color:#888}
.workspace{display:grid;grid-template-columns:minmax(380px,560px) minmax(0,1fr);gap:22px;align-items:start}
.editpane{min-width:0}
.previewpane{position:sticky;top:76px;background:#141414;border:1px solid #272727;display:flex;flex-direction:column;height:calc(100vh - 100px)}
.previewpane.studio{position:static;height:calc(100vh - 230px)}
.previewbar{display:flex;align-items:center;gap:14px;padding:9px 12px;border-bottom:1px solid #272727;flex-wrap:wrap}
.previewbar strong{color:#ddd}.previewbar a{margin-left:auto;color:#999;font-size:13px}
.devices{display:flex;gap:4px}.devices button{background:#242424;color:#aaa;padding:5px 10px;font-weight:400;font-size:12px}
.devices button.on{background:#e5e5e5;color:#111}
.frame{flex:1;display:flex;justify-content:center;background:#050505;overflow:auto;padding:0}
.frame iframe{border:0;background:#000;height:100%;width:100%;transition:width .2s}
.frame.tablet iframe{width:820px;border-left:1px solid #222;border-right:1px solid #222}
.frame.mobile iframe{width:390px;border-left:1px solid #222;border-right:1px solid #222}
.studiobar{display:flex;align-items:center;gap:18px;margin-bottom:12px}.studiobar select{width:auto;min-width:280px;margin-left:8px}
.list{border:1px solid #262626}
.row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:13px 15px;background:#141414;border-bottom:1px solid #222}
.row:last-child{border-bottom:0}.row b{color:#e0e0e0}.row small{display:block;color:#777;margin-top:3px}
.actions{display:flex;gap:6px;align-items:center;flex-wrap:nowrap;flex-shrink:0}.row>div:first-child{min-width:0;flex:1}.actions form{margin:0}
.badge{display:inline-block;padding:0 7px;border-radius:9px;font-size:11px;text-transform:uppercase;letter-spacing:.5px;background:#2b2b2b;color:#aaa}
.badge.published{background:#1d3a24;color:#9fdcae}
.stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:22px}
.stat{background:#141414;border:1px solid #262626;padding:16px}.stat b{display:block;font-size:28px;color:#eee;font-weight:400}.stat span{display:block;color:#bbb}.stat small{color:#666}
.tasks{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:18px}
.task{display:block;background:#141414;border:1px solid #262626;padding:18px;text-decoration:none}.task:hover{background:#1c1c1c;border-color:#3a3a3a}
.task b{display:block;color:#eee;margin-bottom:5px}.task span{color:#888}
.login{max-width:430px;margin:9vh auto}.login form{margin-top:16px}.login button{width:100%}
.log{width:100%;border-collapse:collapse;background:#141414}.log th,.log td{text-align:left;padding:9px 12px;border-bottom:1px solid #232323}.log th{color:#ddd}
@media(max-width:1100px){.workspace{grid-template-columns:1fr}.previewpane{position:static;height:70vh}.stats{grid-template-columns:repeat(2,1fr)}.tasks{grid-template-columns:1fr}}
/* ---- 0.5 page builder ---- */
body.wide .adminmain{max-width:none;padding:14px 16px 20px}
.builder{display:grid;grid-template-columns:250px minmax(0,1fr) 370px;gap:14px;height:calc(100vh - 128px)}
.palette,.sidepanel{background:#121212;border:1px solid #262626;overflow:auto;padding:12px 14px}
.sidepanel h2{font-size:18px;margin:4px 0 10px}.palette h3{font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#777;margin:16px 0 8px;font-family:inherit;font-weight:700}
.block{display:flex;gap:8px;align-items:flex-start;justify-content:space-between;background:#1a1a1a;border:1px solid #2c2c2c;padding:9px 10px;margin-bottom:6px;cursor:grab;border-radius:3px}
.block:hover{border-color:#555;background:#202020}.block:active{cursor:grabbing}
.block b{display:block;color:#e8e8e8;font-size:13px}.block small{display:block;color:#777;font-size:11.5px;line-height:1.35;margin-top:2px}.block form{margin:0}
.canvas{position:static!important;height:auto!important;min-height:0}
.outline{list-style:none;margin:0 0 14px;padding:0;border:1px solid #262626;min-height:46px}
.outitem{display:flex;align-items:center;gap:9px;padding:8px 10px;background:#171717;border-bottom:1px solid #222;cursor:pointer}
.outitem:last-child{border-bottom:0}.outitem:hover{background:#1f1f1f}.outitem.active{background:#2b2b2b;box-shadow:inset 3px 0 0 #e8e8e8}
.outitem.ishidden .outtext{opacity:.5}.outitem.dragging{opacity:.35}
.outtext{flex:1;min-width:0}.outtext b{display:block;color:#ddd;font-size:13px}.outtext small{display:block;color:#777;font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grip{color:#555;cursor:grab;letter-spacing:-2px;font-size:13px;user-select:none}
.outplaceholder{height:36px;border:2px dashed #4da3ff;background:#0f1a24;list-style:none}
.outempty{padding:14px;color:#777;text-align:center;list-style:none}
.outline.dropping{border-color:#4da3ff}
.inspector form{background:none;border:0;padding:0}.inspecthead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:6px 0 4px}
.inspecthead b{color:#eee;font-size:16px}
.sectionactions{margin-top:14px;padding-top:12px;border-top:1px solid #262626}
.button.wide{display:block;text-align:center;margin-top:12px}
.check{display:flex;gap:8px;align-items:center;margin:0 0 15px;color:#ccc}.check input{width:auto}
.listfield{margin-bottom:16px}.listlabel{display:block;color:#d0d0d0;margin-bottom:6px}
.listrow{border:1px solid #2a2a2a;margin-bottom:6px;background:#161616}.listrow summary{cursor:pointer;padding:9px 11px;color:#ddd}
.listrow[open]{padding:0 11px 6px}.listrow[open] summary{padding-left:0}
.placements{margin-top:16px}.placements ul{margin:8px 0 0;padding-left:18px}.placements li{margin:6px 0}.placements small{display:block;color:#777}
.pagelist{list-style:none;padding:0;margin:0}.pagerow{cursor:grab}.pagerow .grip{margin-right:4px}.pagerow .badge{margin-left:6px}
form.inline{display:flex;gap:8px;margin:0}form.inline input{width:260px}
@media(max-width:1300px){.builder{grid-template-columns:220px minmax(0,1fr) 320px}}
@media(max-width:1000px){.builder{grid-template-columns:1fr;height:auto}.canvas .frame{height:70vh}}

/* ---- 0.6 ---- */
.palettesearch{margin:0 0 6px}
.pgroup{margin:0 0 4px}.pgroup>summary{cursor:pointer;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;color:#888;font-weight:700;padding:10px 0 8px;list-style:none}
.pgroup>summary::-webkit-details-marker{display:none}.pgroup>summary:before{content:"\25BE ";color:#555}.pgroup:not([open])>summary:before{content:"\25B8 "}
.block[data-saved]{border-color:#3d4a3d}
.frame.large iframe{width:1440px;flex:none}.frame.laptop iframe{width:1180px;flex:none;border-left:1px solid #222;border-right:1px solid #222}
.frame.mobile iframe{width:390px}.devices button{padding:5px 8px}
.badges{display:flex;gap:4px;flex-wrap:wrap;margin-top:3px}.badges .badge{font-size:10px;padding:0 6px}.badge.draftb{background:#3a2f12;color:#f2d98a}
.designbox{border:1px solid #2a2a2a;margin:4px 0 16px;padding:0 12px;background:#161616}
.designbox>summary{cursor:pointer;padding:10px 0;color:#ddd}.designbox[open]{padding-bottom:6px}
.minirow{display:flex;gap:6px;margin:8px 0 0;align-items:center}.minirow select,.minirow input{flex:1;min-width:0;padding:6px 8px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px;margin:8px 0 18px}
.tcard{display:block;border:1px solid #2c2c2c;background:#171717;padding:12px 14px;cursor:pointer}
.tcard input{width:auto;margin:0 8px 0 0}.tcard b{color:#e8e8e8}.tcard small{display:block;color:#777;margin-top:5px}
.tcard:has(input:checked){border-color:#e8e8e8;background:#202020}
.state{display:inline-block;padding:7px 11px;font-size:13px;border-radius:3px;margin-right:6px}
.state.ok{background:#14261a;color:#9fdcae}.state.warn{background:#2a2410;color:#f2d98a}.state.none{background:#1e1e1e;color:#999}
.listfilter{max-width:340px;margin:0 0 12px}
.linkcheck{margin-top:14px}.linkcheck.ok{color:#9fdcae}.linkcheck.warn{border-color:#5a4a1c}.linkcheck ul{margin:10px 0;padding-left:20px}
.dropzone{border-style:dashed;text-align:center;margin-bottom:18px}.dropzone.over{border-color:#4da3ff;background:#0f1a24}.dropzone label.button{margin-left:8px}
#uploadstatus{color:#bbb;margin-top:6px}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;border:0}
.mcard{background:#141414;border:1px solid #262626;display:flex;flex-direction:column}
.mcard img,.mfile{width:100%;height:150px;object-fit:cover;background:#0b0b0b;display:block}
.mfile{display:flex;align-items:center;justify-content:center;color:#666;font-size:22px;font-weight:700;letter-spacing:2px}
.mmeta{padding:10px}.mmeta b{display:block;color:#ddd;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mmeta small{color:#777}
.mpath{margin:8px 0;padding:6px 8px;font-size:12px}
.pagerow>div:not(.actions){flex:1;min-width:0}

/* ---- 0.7 ---- */
.adminnav a{padding:7px 8px}
.syncnote{background:#14202b;border:1px solid #284a66;color:#bcd7ee;padding:9px 12px;margin:8px 0 12px;font-size:13px}.syncnote.warn{background:#2a1414;border-color:#5a2c2c;color:#f2b8b8}
.badge.syncb{background:#14202b;color:#9cc8ee}
.outlinefilter{margin:0 0 8px;padding:7px 9px}
.shortcuts{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:50;display:flex;align-items:center;justify-content:center}
.shortcuts[hidden]{display:none}.shortcuts .card{max-width:520px;width:90%}
kbd{background:#222;border:1px solid #3a3a3a;border-bottom-width:2px;padding:1px 6px;font:12px Consolas,monospace;color:#ddd;border-radius:3px}
.bulkbar{display:flex;gap:8px;align-items:center;margin:0 0 10px;background:none;border:0;padding:0}.bulkbar .check{margin:0 8px 0 0}
.pick{margin-right:4px}.pick input{width:auto}
.publishform{background:none;border:0;padding:0}.publishform input{width:280px}
.row small.note{color:#bcd7ee;margin-top:4px}
.health .hstate{display:inline-block;min-width:52px;font-size:11px;text-transform:uppercase;letter-spacing:.8px;margin-right:8px;padding:2px 6px;text-align:center;border-radius:3px}
.health.ok .hstate{background:#14261a;color:#9fdcae}.health.warn .hstate{background:#2a2410;color:#f2d98a}.health.info .hstate{background:#1e1e1e;color:#aaa}
.wordcount{margin:-10px 0 14px}

/* ---- 0.8 ---- */
.adminbar{flex-wrap:nowrap}.adminnav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:thin;min-width:0}

.cmdpal{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:60;display:flex;justify-content:center;align-items:flex-start;padding-top:12vh}
.cmdpal[hidden]{display:none}.cmdpal .card{width:min(560px,92vw);max-height:70vh;overflow:auto}
.cmdpal ul{list-style:none;margin:10px 0 0;padding:0}.cmdpal li a{display:block;padding:8px 10px;text-decoration:none;color:#ddd}
.cmdpal li.sel a,.cmdpal li a:hover{background:#262626;color:#fff}
.idlewarn{position:fixed;left:50%;transform:translateX(-50%);bottom:18px;background:#2a2410;border:1px solid #5a4a1c;color:#f2d98a;padding:12px 16px;z-index:70}
.idlewarn[hidden]{display:none}
.checklist{list-style:none;padding:0;margin:10px 0}.checklist li{padding:3px 0}.checklist .ok{color:#9fdcae}.checklist .todo{color:#999}
.okline{color:#9fdcae}.inlineform{background:none;border:0;padding:0;margin:10px 0;max-width:420px}
.log tr.alert td{color:#f2d98a}.warnbox{border-color:#5a4a1c}.codes{columns:2;font-size:16px}.codes code{font-size:16px}
.secret{font-size:18px;letter-spacing:2px;display:inline-block;margin-top:6px}.steps2 li{margin:10px 0}
.counter{display:block;color:#666;font-size:12px;margin-top:4px}.counter.over{color:#f2d98a}
@media(max-width:900px){.adminbar{flex-wrap:wrap}}
/* ---- 0.9 ---- */
.qgroups .dgroup{font:700 11px/1 "Segoe UI",Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase;color:#8a8a8a;margin:16px 0 10px;padding-top:12px;border-top:1px solid #262626}
.colorrow{display:flex;gap:8px;align-items:center}.colorrow input{flex:1}
.swatch{display:inline-block;width:30px;height:30px;flex:none;border:1px solid #3a3a3a;border-radius:3px;background:transparent}
.swatch.empty{background:repeating-linear-gradient(45deg,#1a1a1a,#1a1a1a 4px,#262626 4px,#262626 8px)}
.quickadd{position:fixed;inset:0;background:rgba(0,0,0,.65);z-index:65;display:flex;justify-content:center;align-items:flex-start;padding-top:8vh}
.quickadd[hidden]{display:none}.quickadd .card{width:min(860px,94vw);max-height:80vh;overflow:auto}
.quickadd #quicksearch{margin:8px 0 4px}
.qgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px}
.qitem{display:block;text-align:left;background:#1a1a1a;color:#ddd;border:1px solid #2c2c2c;padding:10px 12px;font-weight:400}
.qitem:hover{background:#242424;border-color:#555;color:#fff}.qitem b{display:block;color:#eee;font-size:13px}.qitem small{display:block;color:#777;font-size:11.5px;margin-top:3px;line-height:1.35}
.qitem[hidden]{display:none}
.bwbtoast{position:fixed;right:22px;bottom:22px;z-index:80;background:#14261a;border:1px solid #2c5a37;color:#b9e6c3;padding:10px 16px;border-radius:4px;
  opacity:0;transform:translateY(8px);transition:opacity .15s,transform .15s;pointer-events:none;max-width:420px}
.bwbtoast.show{opacity:1;transform:none}.bwbtoast.bad{background:#2a1414;border-color:#5a2c2c;color:#f2b8b8}
.sectionactions .actions{flex-wrap:wrap}.inspector .actions{flex-wrap:wrap}
/* ---- 0.10: grouped navigation, builder bar, collapsible panels ---- */
.adminbar{gap:28px;padding:0 22px;height:56px}
.brand{text-decoration:none;font-size:13px}
.adminnav{display:flex;gap:4px;flex:1;overflow:visible}
.adminnav a{padding:8px 14px;font-size:14px}
.signout{white-space:nowrap}
.subnav{display:flex;gap:2px;padding:0 22px;background:#101010;border-bottom:1px solid #222;position:sticky;top:56px;z-index:19;overflow-x:auto}
.subnav a{color:#888;text-decoration:none;padding:10px 12px;font-size:13px;border-bottom:2px solid transparent;white-space:nowrap}
.subnav a:hover{color:#ddd}.subnav a.active{color:#fff;border-bottom-color:#e8e8e8}
.chip{display:inline-block;padding:6px 11px;border-radius:14px;font-size:12.5px;text-decoration:none;background:#1e1e1e;color:#aaa;white-space:nowrap}
.chip.ok{background:#14261a;color:#9fdcae}.chip.warn{background:#3a2f12;color:#f2d98a}.chip:hover{filter:brightness(1.2)}
.viewopts{display:flex;gap:12px;font-size:12.5px;color:#999}.viewopts label{display:flex;gap:5px;align-items:center;cursor:pointer}.viewopts input{width:auto}
.dgroupbox{border-top:1px solid #262626}.dgroupbox:first-of-type{border-top:0}
.dgroupbox>summary{cursor:pointer;padding:10px 0;color:#bbb;font-size:13px}.dgroupbox[open]>summary{color:#fff}
.moreactions{margin-top:14px;border:1px solid #262626;padding:0 12px;background:#141414}
.moreactions>summary{cursor:pointer;padding:10px 0;color:#ccc}.moreactions .sectionactions:first-of-type{margin-top:0;border-top:0;padding-top:0}
.moreactions[open]{padding-bottom:12px}
.serp{margin:4px 0 16px;padding:12px 14px;background:#fff;border-radius:6px;font-family:Arial,sans-serif}
.serp small{display:block;color:#5f6368;font-size:11px;margin-bottom:4px}.serp b{display:block;color:#1a0dab;font-weight:400;font-size:17px;line-height:1.3}
.serp i{display:block;color:#188038;font-style:normal;font-size:12.5px}.serp p{margin:4px 0 0;color:#4d5156;font-size:13px;line-height:1.45}
/* ---- 0.11: the builder studio is the default screen ---- */
body.wide .adminmain{padding:0;max-width:none}
body.wide .flash{margin:0;border-width:0 0 1px}
.buildbar{display:flex;align-items:center;gap:10px;height:48px;padding:0 10px;background:#101010;border-bottom:1px solid #232323}
.buildbar .spacer{flex:1}.buildbar form{margin:0}
.studiopage{display:flex;flex-direction:column;line-height:1.15;min-width:0;max-width:240px;margin-right:6px}
.studiopage b{color:#eee;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.studiopage small{color:#777;font-size:11.5px}
.toolgroup{display:flex;gap:2px;align-items:center;padding:0 6px;border-left:1px solid #262626}
.tool{display:inline-flex;align-items:center;justify-content:center;min-width:32px;height:32px;padding:0 8px;background:transparent;color:#bbb;
  border:0;border-radius:4px;font:400 15px/1 "Segoe UI",Arial,sans-serif;cursor:pointer;text-decoration:none}
.tool:hover{background:#262626;color:#fff}.tool.on{background:#e8e8e8;color:#111}.tool:disabled{opacity:.3}
.tool.wide{font-size:13px;gap:6px}
.buildbar .devices{gap:2px}.buildbar .devices button{background:transparent;color:#999;font-size:12.5px;padding:0 8px;font-weight:600}
.buildbar .devices button.on{background:#e8e8e8;color:#111}
.publishbtn{background:#4da3ff;color:#fff;padding:8px 18px}.publishbtn:hover{background:#2f86e6}
.studio .builder{grid-template-columns:270px minmax(0,1fr) 360px;gap:0;height:calc(100vh - 105px)}
.studio .palette,.studio .sidepanel{border:0;border-right:1px solid #232323;background:#111}.studio .sidepanel{border-right:0;border-left:1px solid #232323}
.studio .canvas{display:flex;flex-direction:column;background:#050505;min-width:0}
.studio .canvas .frame{flex:1;height:100%}
body.hide-left .studio .builder{grid-template-columns:0 minmax(0,1fr) 360px}
body.hide-right .studio .builder{grid-template-columns:270px minmax(0,1fr) 0}
body.hide-left.hide-right .studio .builder,body.previewing .studio .builder{grid-template-columns:0 minmax(0,1fr) 0}
body.hide-left .studio .leftpanel,body.hide-right .studio .sidepanel,body.previewing .studio .leftpanel,body.previewing .studio .sidepanel{display:none}
body.previewing .buildbar .toolgroup:not(.devices),body.previewing .buildbar [data-toggle-left],body.previewing .buildbar [data-toggle-right]{display:none}
.lefttabs{display:flex;margin:-12px -14px 12px;border-bottom:1px solid #232323}
.lefttabs button{flex:1;background:none;color:#888;border-radius:0;padding:11px 0;font-weight:600;font-size:13px;border-bottom:2px solid transparent}
.lefttabs button:hover{color:#ddd;background:none}.lefttabs button.on{color:#fff;border-bottom-color:#4da3ff}
.lefttab[hidden]{display:none}
.pagefilter{margin:0 0 8px;padding:7px 9px}
.pagelistside{display:flex;flex-direction:column;gap:2px;margin-bottom:12px}
.pageitem{display:block;padding:8px 10px;border-radius:4px;text-decoration:none;border-left:3px solid transparent}
.pageitem:hover{background:#1c1c1c}.pageitem.on{background:#202a35;border-left-color:#4da3ff}
.pageitem b{display:block;color:#e2e2e2;font-weight:500;font-size:13.5px}.pageitem small{display:block;color:#777;font-size:11.5px}
.pageitem[hidden]{display:none}
.newpage{border:1px solid #2a2a2a;padding:0 10px;background:#161616;margin-bottom:10px}.newpage>summary{cursor:pointer;padding:9px 0;color:#ddd}
.newpage form{display:flex;flex-direction:column;gap:8px;padding-bottom:10px}
.modal{position:fixed;inset:0;background:rgba(0,0,0,.7);z-index:75;display:flex;align-items:center;justify-content:center}
.modal[hidden]{display:none}.modal .card{width:min(520px,92vw)}.modal .actions{justify-content:flex-end;margin-top:6px}
.warnline{color:#f2d98a;background:#2a2410;border:1px solid #5a4a1c;padding:8px 12px}
@media(max-width:1300px){.studio .builder{grid-template-columns:240px minmax(0,1fr) 320px}.buildbar .viewopts{display:none}}
@media(max-width:1000px){.studio .builder{grid-template-columns:1fr;height:auto}.studio .canvas .frame{height:70vh}.buildbar{flex-wrap:wrap;height:auto;padding:6px}}
/* ---- 0.12: Frameworks section ---- */
.navcount{display:inline-block;min-width:18px;margin-left:6px;padding:1px 6px;border-radius:9px;background:#4da3ff;color:#fff;font:700 11px/16px "Segoe UI",Arial,sans-serif;font-style:normal;text-align:center}
.ranking td,.ranking th{vertical-align:top}.ranking td small{display:block;color:#777;font-size:12px}.ranking td.num{white-space:nowrap}
.ranking b.pos{color:#7fd29a}.ranking b.neg{color:#f08b8b}.ranking a{text-decoration:none}
.sorter{display:flex;gap:6px;align-items:center;flex-wrap:wrap;color:#888}
.badge.warnb{background:#3a2f12;color:#f2d98a}
.fwedit{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:22px;align-items:start}.fwedit aside{display:flex;flex-direction:column;gap:14px}
.fwedit aside .card h2{margin-top:0}.statgrid th{width:45%}
.row.unread{box-shadow:inset 3px 0 0 #4da3ff}.row p.pre,.pre{white-space:pre-wrap;color:#bbb;margin:6px 0 0}
small.inline{display:inline;color:#888}
.copyline{font:14px Consolas,monospace;cursor:copy}
.dangerzone{margin-top:4px}
@media(max-width:1100px){.fwedit{grid-template-columns:1fr}}