/* ===== qwzkySyntax — UI ===== */
:root{
  --bg:#15181f;
  --surface:#1a1e27;
  --surface-2:#20242f;
  --surface-3:#272c39;
  --border:#2c313d;
  --border-soft:#242935;
  --text:#e8eaf0;
  --muted:#9aa3b4;
  --muted-2:#717a8c;
  --accent:#8b9bff;
  --accent-strong:#6d7dff;
  --accent-soft:rgba(139,155,255,.14);
  --danger:#e5575c;
  --danger-soft:rgba(229,87,92,.16);
  --shadow:0 14px 40px rgba(0,0,0,.42);
  --shadow-sm:0 4px 14px rgba(0,0,0,.3);
  --radius:13px;
  --radius-sm:9px;
  --ui-scale:1;
  --p1h:160px;

  --sans:"Segoe UI",system-ui,-apple-system,Roboto,"Helvetica Neue",Arial,sans-serif;
  --mono:"Cascadia Code","JetBrains Mono",Consolas,"SF Mono",monospace;
}

*{box-sizing:border-box;}
html,body{height:100%;margin:0;}
body{
  font-family:var(--sans);
  background:var(--bg);
  color:var(--text);
  overflow:hidden;
  -webkit-font-smoothing:antialiased;
  user-select:none;
  -webkit-user-select:none;
}
/* singurul text selectabil/editabil: câmpul de input și notițele */
#inputText, .postit-body{ user-select:text; -webkit-user-select:text; }
body.resizing,body.resizing *{cursor:row-resize !important;user-select:none !important;}
.mono{font-family:var(--mono);}

button{font-family:inherit;color:inherit;cursor:pointer;border:none;background:none;}
button:focus-visible,input:focus-visible,select:focus-visible,[contenteditable]:focus-visible{
  outline:2px solid var(--accent);outline-offset:1px;
}
.ic{display:block;}

#app{
  display:grid;
  grid-template-rows:auto var(--p1h) 7px 1fr auto;
  height:100vh;
}

/* ===== Topbar ===== */
.topbar{
  display:flex;align-items:center;justify-content:space-between;
  height:calc(50px * var(--ui-scale));
  padding:0 calc(16px * var(--ui-scale));
  background:linear-gradient(180deg,#1b1f29,#171b23);
  border-bottom:1px solid var(--border);
  z-index:20;
}
.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:650;letter-spacing:.3px;
  font-size:calc(16px * var(--ui-scale));
}
.logo{
  display:grid;place-items:center;
  width:calc(26px * var(--ui-scale));height:calc(26px * var(--ui-scale));
  border-radius:7px;
  background:linear-gradient(150deg,var(--accent),var(--accent-strong));
  color:#10131a;font-weight:800;font-size:calc(15px * var(--ui-scale));
  box-shadow:0 2px 10px rgba(109,125,255,.45);
}
.top-actions{display:flex;align-items:center;gap:14px;}
.bg-dots{display:flex;align-items:center;gap:8px;}
.dot{
  width:calc(20px * var(--ui-scale));height:calc(20px * var(--ui-scale));
  border-radius:50%;
  border:2px solid rgba(255,255,255,.16);
  opacity:.42;transition:opacity .15s,transform .15s,box-shadow .15s;
}
.dot:hover{opacity:.8;transform:scale(1.08);}
.dot.active{opacity:1;border-color:#fff;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--accent);}

/* ===== generic chrome buttons ===== */
.icon-btn{
  display:grid;place-items:center;
  width:calc(34px * var(--ui-scale));height:calc(34px * var(--ui-scale));
  border-radius:var(--radius-sm);
  color:var(--muted);
  background:var(--surface-2);
  border:1px solid var(--border-soft);
  transition:.14s;
}
.icon-btn .ic{width:calc(20px * var(--ui-scale));height:calc(20px * var(--ui-scale));}
.icon-btn:hover{color:var(--text);background:var(--surface-3);border-color:var(--border);}
.icon-btn:disabled{opacity:.32;cursor:default;}
.icon-btn.danger:hover{color:#fff;background:var(--danger-soft);border-color:var(--danger);}
.icon-btn.active{color:#10131a;background:var(--accent);border-color:var(--accent);box-shadow:0 2px 12px rgba(109,125,255,.4);}

/* buton proeminent „Curăță tot” */
.danger-pill{
  display:inline-flex;align-items:center;gap:7px;line-height:1;
  height:calc(32px * var(--ui-scale));padding:0 calc(14px * var(--ui-scale));
  border-radius:9px;font-weight:650;font-size:calc(12.5px * var(--ui-scale));
  color:#fff;background:linear-gradient(180deg,#e5575c,#d23b41);
  border:1px solid #ef6a6f;box-shadow:0 2px 12px rgba(229,87,92,.4);transition:.14s;
}
.danger-pill .ic{width:calc(16px * var(--ui-scale));height:calc(16px * var(--ui-scale));}
.danger-pill:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 4px 16px rgba(229,87,92,.5);}
.danger-pill:active{transform:translateY(0);}

.chip-btn{
  height:calc(30px * var(--ui-scale));
  padding:0 calc(11px * var(--ui-scale));
  display:inline-flex;align-items:center;gap:6px;
  border-radius:8px;
  font-size:calc(12.5px * var(--ui-scale));font-weight:550;
  color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border-soft);transition:.14s;
}
.chip-btn .ic{width:15px;height:15px;}
.chip-btn:hover{color:var(--text);background:var(--surface-3);}
.mini-btn{
  width:28px;height:26px;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  border-radius:7px;font-size:16px;font-weight:600;
  color:var(--muted);background:var(--surface-2);border:1px solid var(--border-soft);
}
.mini-btn:hover{color:var(--text);background:var(--surface-3);}

.mini-collapse{
  width:calc(26px * var(--ui-scale));height:calc(24px * var(--ui-scale));
  display:inline-flex;align-items:center;justify-content:center;line-height:1;
  border-radius:6px;font-size:calc(14px * var(--ui-scale));
  color:var(--muted-2);background:transparent;border:1px solid transparent;transition:.14s;
}
.mini-collapse:hover{color:var(--text);background:var(--surface-2);}
.mini-collapse.rot{transform:rotate(180deg);}

/* ===== Panel 1 ===== */
.panel1{
  display:grid;grid-template-rows:auto 1fr;min-height:0;
  background:var(--surface);border-bottom:1px solid var(--border-soft);
}
.panel1.collapsed{grid-template-rows:auto;}
.panel1.collapsed .input-text{display:none;}
.panel1-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:calc(7px * var(--ui-scale)) calc(14px * var(--ui-scale));
  border-bottom:1px solid var(--border-soft);
}
.panel-title{
  font-size:calc(11px * var(--ui-scale));font-weight:700;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--muted-2);
}
.panel1-tools{display:flex;align-items:center;gap:7px;}
.input-text{
  width:100%;height:100%;resize:none;border:none;outline:none;
  padding:calc(14px * var(--ui-scale)) calc(18px * var(--ui-scale));
  background:transparent;color:var(--text);
  font-family:Georgia,"Times New Roman",serif;font-size:18px;line-height:1.55;
}
.input-text::placeholder{color:var(--muted-2);}

.vsplit{
  background:var(--border-soft);position:relative;cursor:row-resize;
}
.vsplit::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:46px;height:3px;border-radius:3px;background:var(--muted-2);opacity:.5;
}
.vsplit:hover{background:var(--accent-soft);}
.vsplit:hover::after{background:var(--accent);opacity:.9;}

/* ===== Panel 2 ===== */
.panel2{display:grid;grid-template-rows:auto auto 1fr;min-height:0;}

.bar{
  display:flex;align-items:center;gap:calc(8px * var(--ui-scale));
  padding:calc(7px * var(--ui-scale)) calc(12px * var(--ui-scale));
  background:var(--surface);border-bottom:1px solid var(--border-soft);
  overflow-x:auto;overflow-y:hidden;scrollbar-width:thin;
}
.bar::-webkit-scrollbar{height:6px;}
.bar::-webkit-scrollbar-thumb{background:var(--border);border-radius:6px;}
.bar-content{display:flex;align-items:center;gap:calc(8px * var(--ui-scale));flex:1;min-width:max-content;}
.bar-label{display:none;font-weight:600;color:var(--muted);letter-spacing:.4px;font-size:calc(12.5px * var(--ui-scale));}
.bar.collapsed .bar-content{display:none;}
.bar.collapsed .bar-label{display:inline;}
.bar .mini-collapse{margin-left:auto;flex:none;}

.group{display:flex;align-items:center;gap:calc(4px * var(--ui-scale));flex:none;}
.divider{width:1px;align-self:stretch;background:var(--border-soft);margin:2px calc(4px * var(--ui-scale));flex:none;}
.lbl{font-size:calc(11.5px * var(--ui-scale));color:var(--muted);white-space:nowrap;}
.readout{
  font-size:calc(11.5px * var(--ui-scale));color:var(--text);
  min-width:38px;text-align:right;
}

/* tool buttons */
.tool-btn{
  display:grid;place-items:center;
  width:calc(34px * var(--ui-scale));height:calc(34px * var(--ui-scale));
  border-radius:var(--radius-sm);
  color:var(--muted);background:var(--surface-2);
  border:1px solid var(--border-soft);transition:.13s;
}
.tool-btn .ic{width:calc(20px * var(--ui-scale));height:calc(20px * var(--ui-scale));}
.tool-btn:hover{color:var(--text);background:var(--surface-3);}
.tool-btn.active{
  color:#10131a;background:var(--accent);border-color:var(--accent);
  box-shadow:0 2px 12px rgba(109,125,255,.4);
}

/* color */
.color-group{gap:calc(8px * var(--ui-scale));}
.color-main{
  position:relative;display:block;
  width:calc(34px * var(--ui-scale));height:calc(34px * var(--ui-scale));
  border-radius:var(--radius-sm);overflow:hidden;cursor:pointer;
  background:var(--surface-2);
  border:1px solid var(--border);
  box-shadow:0 1px 3px rgba(0,0,0,.35);
}
.color-main input[type=color]{position:absolute;inset:0;width:100%;height:100%;border:none;padding:0;margin:0;opacity:0;cursor:pointer;}
.color-chip{
  position:absolute;inset:4px;border-radius:7px;z-index:2;pointer-events:none;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.22), inset 0 0 0 2.5px rgba(0,0,0,.28), 0 1px 2px rgba(0,0,0,.25);
}
.favorites{display:flex;align-items:center;gap:calc(5px * var(--ui-scale));}
.fav{
  position:relative;
  width:calc(22px * var(--ui-scale));height:calc(22px * var(--ui-scale));
  border-radius:6px;border:2px solid rgba(255,255,255,.18);transition:.13s;
}
.fav:hover{transform:scale(1.12);border-color:rgba(255,255,255,.4);}
.fav-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none;}

/* stroke slider */
input[type=range]{
  -webkit-appearance:none;appearance:none;height:5px;border-radius:5px;
  background:var(--surface-3);outline:none;cursor:pointer;
}
.stroke-group input[type=range]{width:calc(96px * var(--ui-scale));}
input[type=range]::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--accent);border:2px solid var(--bg);box-shadow:0 1px 4px rgba(0,0,0,.5);
}
input[type=range]::-moz-range-thumb{width:15px;height:15px;border-radius:50%;background:var(--accent);border:2px solid var(--bg);}

/* sliders sub-panel */
.sliders .bar-content{gap:calc(26px * var(--ui-scale));}
.slider-cell{display:flex;align-items:center;gap:calc(10px * var(--ui-scale));flex:none;}
.slider-cell input[type=range]{width:calc(150px * var(--ui-scale));}

/* ===== Canvas ===== */
.canvas-wrap{
  position:relative;min-height:0;overflow:hidden;background:#0f1117;
}
#canvas{position:absolute;inset:0;display:block;touch-action:none;}

.tool-badge{
  position:absolute;left:0;top:0;display:none;pointer-events:none;z-index:8;
  color:var(--text);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.6));
}
.tool-badge .ic{width:17px;height:17px;}
.tool-badge .badge-inner{
  display:grid;place-items:center;width:22px;height:22px;border-radius:6px;
  background:rgba(20,23,31,.82);border:1px solid var(--accent);
}

.carousel{
  position:absolute;left:0;top:0;display:none;pointer-events:none;z-index:9;
  padding:6px;border-radius:11px;gap:3px;
  background:rgba(18,21,28,.72);border:1px solid var(--border);
  backdrop-filter:blur(6px);box-shadow:var(--shadow-sm);
}
.carousel.show{display:flex;}
.cz-icon{
  display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  color:var(--muted);opacity:.5;border:1.5px solid transparent;transition:.1s;
}
.cz-icon .ic{width:19px;height:19px;}
.cz-icon.on{opacity:1;color:#fff;background:var(--accent-soft);border-color:var(--accent);}

.text-input{
  position:absolute;display:none;z-index:10;
  background:rgba(255,255,255,.06);border:1px dashed var(--accent);
  border-radius:5px;padding:1px 4px;outline:none;
  font-family:Georgia,serif;
  white-space:pre;overflow:hidden;resize:none;
  box-sizing:content-box;min-width:24px;
}

/* canvas zoom control */
.canvas-zoom{
  position:absolute;left:14px;bottom:14px;z-index:7;
  display:flex;align-items:center;gap:4px;padding:4px;
  background:rgba(20,23,31,.82);border:1px solid var(--border);
  border-radius:11px;backdrop-filter:blur(6px);box-shadow:var(--shadow-sm);
}
.cz-btn{
  display:grid;place-items:center;width:30px;height:30px;border-radius:8px;
  color:var(--muted);transition:.13s;
}
.cz-btn .ic{width:18px;height:18px;}
.cz-btn:hover{color:var(--text);background:var(--surface-3);}
.cz-val{min-width:42px;text-align:center;font-size:12px;color:var(--text);}

/* save / copy floating */
.float-actions{position:absolute;right:14px;bottom:14px;z-index:7;display:flex;gap:9px;}
.float-btn{
  display:inline-flex;align-items:center;gap:7px;
  padding:9px 14px;border-radius:11px;font-weight:600;font-size:13px;
  color:var(--text);background:rgba(26,30,39,.92);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);transition:.14s;
}
.float-btn .ic{width:17px;height:17px;color:var(--accent);}
.float-btn:hover{background:var(--surface-3);border-color:var(--accent);transform:translateY(-1px);}

/* post-it */
.postit-group{position:absolute;right:14px;top:14px;z-index:12;}
.postit-btn{padding:9px;width:42px;height:42px;justify-content:center;}
.postit-btn .ic{width:20px;height:20px;color:#f4c54a;}
.postit-panel{
  position:absolute;right:0;top:calc(100% + 8px);width:330px;
  background:#fdf7e3;color:#262017;border-radius:12px;
  box-shadow:var(--shadow);border:1px solid #e6d9a8;
  opacity:0;transform:translateY(-6px) scale(.98);pointer-events:none;
  transition:opacity .14s,transform .14s;transform-origin:top right;
  overflow:hidden;
}
.postit-group.open .postit-panel,.postit-group.pinned .postit-panel{
  opacity:1;transform:none;pointer-events:auto;
}
.postit-toolbar{
  display:flex;align-items:center;gap:3px;flex-wrap:wrap;
  padding:6px 8px;background:#f6edcf;border-bottom:1px solid #e7d9a6;
}
.pt-b{
  display:grid;place-items:center;min-width:26px;height:26px;padding:0 5px;
  border-radius:6px;color:#4a4230;font-size:13px;transition:.12s;
}
.pt-b .ic{width:16px;height:16px;}
.pt-b:hover{background:rgba(0,0,0,.07);color:#1c1810;}
.pt-b.active{background:#e7c84a;color:#221c0e;}
.pt-color{display:grid;place-items:center;width:26px;height:26px;border-radius:6px;overflow:hidden;cursor:pointer;}
.pt-color input{width:130%;height:130%;border:none;padding:0;cursor:pointer;transform:translate(-3px,-3px);}
.pt-sep{width:1px;height:18px;background:#d9c98f;margin:0 3px;}
.pt-sel{
  height:24px;border-radius:6px;border:1px solid #d9c98f;background:#fffdf2;
  color:#3a331f;font-size:12px;padding:0 2px;
}
.pt-x{color:#7a6e45;font-size:12px;}
.postit-body{
  min-height:150px;max-height:340px;overflow:auto;
  padding:12px 14px;font-size:14px;line-height:1.5;outline:none;
  font-family:var(--sans);
}
.postit-body:empty::before{content:"Notițe pentru lecție…";color:#9c9067;}
.postit-body table.pt-table{border-collapse:collapse;margin:6px 0;width:auto;}
.postit-body table.pt-table td{border:1px solid #b9a86c;padding:3px 7px;min-width:34px;}
.postit-pager{
  display:flex;align-items:center;gap:4px;justify-content:flex-end;
  padding:5px 8px;background:#f6edcf;border-top:1px solid #e7d9a6;
}
.pt-page{font-size:11px;color:#6f6444;min-width:42px;text-align:center;}

/* ===== Footer ===== */
.footer{
  display:flex;align-items:center;gap:16px;
  height:36px;
  padding:0 14px;
  background:#171b23;border-top:1px solid var(--border);
  font-size:11.5px;z-index:20;
}
.ui-zoom{display:flex;align-items:center;gap:7px;flex:none;height:100%;}
.footer .lbl{line-height:1;font-size:11.5px;}
.footer .readout{min-width:42px;text-align:center;line-height:1;font-size:11.5px;}

/* ===== Settings modal ===== */
.modal{
  position:fixed;inset:0;z-index:100;display:none;
  align-items:center;justify-content:center;
  background:rgba(8,10,14,.6);backdrop-filter:blur(3px);
}
.modal.open{display:flex;}
.modal-card{
  width:min(560px,92vw);max-height:88vh;overflow:auto;
  background:var(--surface);border:1px solid var(--border);
  border-radius:16px;box-shadow:var(--shadow);
}
.modal-head{
  display:flex;align-items:center;justify-content:space-between;
  padding:16px 20px;border-bottom:1px solid var(--border-soft);
  position:sticky;top:0;background:var(--surface);z-index:2;
}
.modal-head h2{margin:0;font-size:17px;}
.modal-body{padding:8px 20px 22px;}
.set-sec{padding:16px 0;border-bottom:1px solid var(--border-soft);}
.set-sec:last-child{border-bottom:none;}
.set-sec h3{margin:0 0 4px;font-size:13px;letter-spacing:.4px;color:var(--text);}
.hint{margin:0 0 12px;font-size:12px;color:var(--muted-2);}
.swatch-row{display:flex;gap:12px;flex-wrap:wrap;}
.field-color{display:flex;flex-direction:column;align-items:center;gap:5px;}
.field-color .pick{
  position:relative;width:42px;height:42px;border-radius:10px;overflow:hidden;cursor:pointer;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.18), inset 0 0 0 2.5px rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.3);
  transition:transform .12s;
}
.field-color .pick:hover{transform:translateY(-2px);}
.field-color .pick input{position:absolute;inset:0;width:100%;height:100%;border:none;padding:0;margin:0;opacity:0;cursor:pointer;}
.field-color .hex{font-family:var(--mono);font-size:10.5px;color:var(--muted);text-transform:uppercase;}
.field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px;font-size:13px;}
.field input[type=number]{
  width:74px;height:32px;border-radius:8px;border:1px solid var(--border);
  background:var(--surface-2);color:var(--text);padding:0 10px;font-family:var(--mono);
}
.check-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;}
.check{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);cursor:pointer;}
.check input{width:16px;height:16px;accent-color:var(--accent);}
.check span{display:inline-flex;align-items:center;gap:6px;}
.check .ic{width:16px;height:16px;color:var(--muted);}
.seg{display:inline-flex;background:var(--surface-2);border:1px solid var(--border);border-radius:9px;padding:3px;gap:3px;}
.seg-btn{padding:6px 16px;border-radius:7px;font-size:13px;color:var(--muted);transition:.12s;}
.seg-btn:hover{color:var(--text);}
.seg-btn.active{background:var(--accent);color:#10131a;font-weight:600;}
.btn-danger{
  padding:10px 16px;border-radius:9px;font-weight:600;font-size:13px;
  color:#ffd9da;background:var(--danger-soft);border:1px solid var(--danger);transition:.13s;
}
.btn-danger:hover{background:var(--danger);color:#fff;}

/* toast */
.toast{
  position:fixed;left:50%;bottom:54px;transform:translateX(-50%) translateY(12px);
  background:var(--surface-3);color:var(--text);border:1px solid var(--border);
  padding:10px 18px;border-radius:10px;font-size:13px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:.22s;z-index:200;max-width:80vw;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0);}

/* ===== Ascunde meniurile (lasă bara de instrumente + pânza) =====
   Folosim flexbox (nu grilă) ca să nu mai depindem de plasarea automată
   când reglajele sunt ascunse: bara stă sus la înălțimea ei, pânza umple restul. */
body.focus-mode .topbar,
body.focus-mode .panel1,
body.focus-mode .vsplit,
body.focus-mode .sliders,
body.focus-mode .footer{ display:none !important; }
body.focus-mode .panel2{
  position:fixed; inset:0; z-index:60; background:#0f1117;
  display:flex; flex-direction:column;
}
body.focus-mode #toolbar{ flex:0 0 auto; }
body.focus-mode #canvasWrap{ flex:1 1 auto; min-height:0; }

/* ===== Confirmare proprie ===== */
.confirm-card{width:min(390px,90vw);padding:22px 22px 18px;}
.confirm-msg{font-size:14.5px;line-height:1.5;color:var(--text);}
.confirm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px;}
.btn-soft{
  padding:10px 18px;border-radius:9px;font-weight:600;font-size:13px;
  color:var(--text);background:var(--surface-2);border:1px solid var(--border);transition:.13s;
}
.btn-soft:hover{background:var(--surface-3);}

@media (prefers-reduced-motion:reduce){*{transition:none !important;}}

/* =========================================================================
   ADAPTĂRI PENTRU TABLETĂ / ATINGERE
   ========================================================================= */
*{ -webkit-tap-highlight-color: transparent; }
html, body{ overscroll-behavior:none; touch-action:manipulation; }
#canvas, .canvas-wrap{ touch-action:none; }
/* fără meniul contextual / lupă la apăsare lungă pe elementele aplicației */
.topbar, .bar, .footer, .toolbar, .sliders, button, .fav, .dot{
  -webkit-touch-callout:none; user-select:none; -webkit-user-select:none;
}

@media (pointer: coarse){
  /* ținte de atingere mai mari */
  .icon-btn{ min-width:46px; min-height:46px; }
  .tool-btn{ min-width:46px; min-height:46px; }
  .pill{ min-height:42px; }
  .cz-icon{ width:42px; height:42px; }
  .mini-btn{ width:40px; height:38px; font-size:20px; }
  .fav{ width:30px; height:30px; }
  .dot{ width:26px; height:26px; }
  .save-btn{ min-height:42px; }
  /* indicatorul de unealtă de lângă cursor nu are sens fără mouse */
  .tool-badge{ display:none !important; }

  /* slidere mai ușor de prins cu degetul */
  input[type=range]{ height:30px; }
  input[type=range]::-webkit-slider-thumb{
    width:26px; height:26px;
  }
  input[type=range]::-moz-range-thumb{
    width:26px; height:26px;
  }

  /* casetele de bifare din setări, mai mari */
  .check input[type=checkbox]{ width:22px; height:22px; }

  /* zona editabilă a notiței permite selecția de text */
  .postit-body{ -webkit-touch-callout:default; }
}


/* ============================================================
   Adăugiri: file în notițe, lucrări salvate, mâner de redimensionare,
   butonul de întoarcere la lecție.
   ============================================================ */

/* Butonul „Salvează" e altfel decât „JPEG" și „Copiază": acelea scot o poză
   din aplicație, ăsta păstrează lucrarea înăuntru. De-aia are culoarea
   notiței, unde ajunge lucrarea. */
.float-btn--keep{background:#f4c54a;color:#2a2210;border-color:#dcae35;}
.float-btn--keep:hover{background:#f7d16e;}
.float-btn--keep .ic{color:#2a2210;}

/* ---- filele Notițe / Lucrări ---- */
.postit-tabs{display:flex;gap:4px;padding:6px 8px 0;background:#f6edcf;}
.pt-tab{
  flex:1;padding:6px 10px;border:none;border-radius:8px 8px 0 0;
  background:transparent;color:#6b5f3c;font:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;user-select:none;display:flex;align-items:center;justify-content:center;gap:6px;
}
.pt-tab:hover{background:#efe3bd;}
.pt-tab.active{background:#fdf7e3;color:#262017;}
.pt-count{
  min-width:18px;padding:0 5px;border-radius:999px;
  background:#e2d195;color:#4a4020;font-size:11px;line-height:17px;
}

/* ---- lista lucrărilor ----
   Nume, nu poze. Numărul de ordine îl pune lista însăși (`<ol>`).

   ATENȚIE la rândul de listă: pusesem pe el `display:flex`, ca să așez numele
   și „×"-ul unul lângă altul. Așa am pierdut numărul, fiindcă un element cu
   `display:flex` nu mai e `list-item`, deci n-are marcator. Iar `flex:1` pe
   nume îl întindea peste tot rândul și împingea „×"-ul tocmai în margine.
   Rândul rămâne acum rând de listă, iar cele două stau inline, lipite. */
.postit-works{padding:6px 8px 10px;overflow:auto;}
.postit-works[hidden]{display:none;}
.works-empty{margin:6px 4px;font-size:12.5px;line-height:1.6;color:#8a7c50;}
/* Invitația la cont: o legătură adevărată, nu un buton fals. Vizitatorul
   trebuie să vadă din prima că duce undeva. */
.works-login{
  display:inline-block;margin:5px 0 2px;padding:4px 11px;
  border-radius:999px;background:#e7c84a;color:#2a2210;
  font-weight:600;text-decoration:none;
}
.works-login:hover{background:#f0d666;}
.works-list{margin:0;padding:0 0 0 30px;list-style:decimal;}
.work{
  display:list-item;
  padding:1px 0;
  color:#6b5f3c;font-size:12.5px;
}
.work::marker{color:#8a7c50;font-variant-numeric:tabular-nums;}
.work-open{
  display:inline;padding:3px 6px;border:none;border-radius:6px;
  background:transparent;color:#3a3218;font:inherit;font-variant-numeric:tabular-nums;
  cursor:pointer;
}
.work-open:hover{background:#f2e6bd;}
/* „×"-ul stă lipit de nume, nu în celălalt capăt al panoului: acolo ar fi la
   fel de departe de lucrarea lui ca de vecina ei. Locul îi e păstrat mereu,
   deci rândul nu tresare când se arată. */
/* Semnul de ștergere e DESENAT, nu scris.
   Litera „×" stă sus în caseta ei de font, iar centrarea casetei n-are cum s-o
   coboare: oricât aș fi aliniat butonul, semnul rămânea deasupra rândului.
   Două bare încrucișate, așezate din centrul butonului, cad exact la mijloc,
   indiferent de font. */
.work-del{
  position:relative;
  display:inline-block;
  width:18px;height:18px;margin-left:2px;vertical-align:middle;
  border:none;border-radius:6px;padding:0;
  background:transparent;color:#a99a63;
  cursor:pointer;opacity:0;transition:opacity .12s,background .12s,color .12s;
}
.work-del::before,.work-del::after{
  content:"";position:absolute;left:50%;top:50%;
  width:10px;height:1.6px;border-radius:2px;background:currentColor;
}
.work-del::before{transform:translate(-50%,-50%) rotate(45deg);}
.work-del::after{transform:translate(-50%,-50%) rotate(-45deg);}
.work:hover .work-del,.work-del:focus-visible{opacity:1;}
.work-del:hover{background:#f6d6d3;color:#a3312a;}

/* ---- mânerul de redimensionare ----
   În colțul din stânga-jos, fiindcă panoul e agățat de dreapta-sus: acolo
   sunt cele două laturi care se pot mișca. */
.postit-resize{
  position:absolute;left:0;bottom:0;width:16px;height:16px;
  cursor:nesw-resize;touch-action:none;
  background:linear-gradient(45deg,transparent 45%,#d8c893 45%,#d8c893 55%,transparent 55%);
}

/* ---- întoarcerea la lecție ---- */
.back-lesson{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 12px;border-radius:9px;
  border:1px solid var(--line,#2b3040);background:transparent;color:inherit;
  font:inherit;font-size:13px;text-decoration:none;cursor:pointer;user-select:none;
  transition:background .12s,border-color .12s,transform .12s;
}
.back-lesson:hover{background:rgba(139,155,255,.12);border-color:#8b9bff;transform:translateX(-2px);}

/* Pe ecran îngust notița ocupă aproape toată lățimea, iar lucrările stau pe
   o singură coloană: două chipuri alăturate ar fi prea mici ca să recunoști
   ce lucrare e care. */
@media (max-width: 620px){
  .postit-panel{width:min(92vw,330px);}
  .back-lesson span:last-child{display:none;}
}