/* دفتر القسم — حبر أزرق للأستاذ، أخضر للنجاح، أحمر للتصحيح */
:root {
  --bg: #f2f5f7;
  --surface: #ffffff;
  --surface-2: #f7f9fb;
  --ink: #142133;
  --muted: #5a6879;
  --line: #dbe2ea;
  --primary: #0b6b4f;
  --primary-ink: #ffffff;
  --primary-soft: #e3f2ec;
  --pen: #2447a3;
  --pen-soft: #e6ecfa;
  --red: #c0392b;
  --red-soft: #fbe9e7;
  --amber: #b7791f;
  --amber-soft: #fbf1df;
  --shadow: 0 1px 2px rgba(20,33,51,.06), 0 4px 16px rgba(20,33,51,.05);
  --font-display: "Noto Kufi Arabic", "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, Arial, sans-serif;
  --r: 10px;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0e141b; --surface: #16202a; --surface-2: #1b2632; --ink: #e7edf3; --muted: #9babbb;
    --line: #283544; --primary: #3cbf8e; --primary-ink: #04261b; --primary-soft: #143a2e;
    --pen: #8aa6f5; --pen-soft: #1d2a4a; --red: #ff7d6e; --red-soft: #3d1d1a;
    --amber: #f0b45a; --amber-soft: #3a2c14; --shadow: 0 1px 2px rgba(0,0,0,.4);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #0e141b; --surface: #16202a; --surface-2: #1b2632; --ink: #e7edf3; --muted: #9babbb;
  --line: #283544; --primary: #3cbf8e; --primary-ink: #04261b; --primary-soft: #143a2e;
  --pen: #8aa6f5; --pen-soft: #1d2a4a; --red: #ff7d6e; --red-soft: #3d1d1a;
  --amber: #f0b45a; --amber-soft: #3a2c14; --shadow: 0 1px 2px rgba(0,0,0,.4);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
}
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; margin: 0; text-wrap: balance; line-height: 1.3; }
h1 { font-size: 1.6rem; } h2 { font-size: 1.3rem; } h3 { font-size: 1.08rem; }
a { color: var(--pen); }
.num, td, .kpi .v { font-variant-numeric: tabular-nums; }
.muted { color: var(--muted); }
.small { font-size: .85rem; }
[hidden] { display: none !important; }

/* ---------- أزرار وحقول ---------- */
button, .btn {
  font: inherit; cursor: pointer; border: 1px solid var(--line); background: var(--surface);
  color: var(--ink); padding: .5rem .95rem; border-radius: 8px; display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none; transition: background .15s, border-color .15s;
}
button:hover, .btn:hover { border-color: var(--muted); }
button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, a:focus-visible {
  outline: 2px solid var(--pen); outline-offset: 2px;
}
.btn-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); font-weight: 600; }
.btn-primary:hover { filter: brightness(1.07); border-color: var(--primary); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--pen); }
.btn-danger { color: var(--red); }
.btn-sm { padding: .25rem .6rem; font-size: .85rem; }
button:disabled { opacity: .55; cursor: not-allowed; }

input, select, textarea {
  font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--line);
  border-radius: 8px; padding: .5rem .7rem; width: 100%; min-width: 0;
}
textarea { resize: vertical; min-height: 90px; }
label.field { display: grid; gap: .25rem; font-size: .9rem; color: var(--muted); }
label.field > span { font-weight: 500; }
.form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: .8rem; }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row.end { justify-content: flex-end; }
.spacer { flex: 1; }
.stack { display: grid; gap: 1rem; }

/* ---------- شاشة الدخول ---------- */
.login-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr;
}
.login-side {
  background: var(--primary); color: var(--primary-ink); padding-block: 3rem;
  padding-left: max(24px, env(safe-area-inset-left, 0px)); padding-right: max(24px, env(safe-area-inset-right, 0px));
  display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden;
  background-image: repeating-linear-gradient(0deg, transparent 0 31px, rgba(255,255,255,.08) 31px 32px);
}
.login-side::after {
  content: ""; position: absolute; top: 0; bottom: 0; right: 64px; width: 2px; background: rgba(255,120,110,.55);
}
.login-side h1 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); max-width: 14ch; }
.login-side .tag { opacity: .85; max-width: 42ch; font-size: 1.05rem; }
.login-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .55rem; }
.login-side li { display: flex; gap: .6rem; align-items: baseline; }
.login-side li b { font-family: var(--font-display); font-weight: 600; min-width: 7.5rem; }
.login-main {
  display: flex; align-items: center; justify-content: center; padding-block: 2rem;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.login-card { width: 100%; max-width: 420px; display: grid; gap: 1.2rem; }
.seg { display: grid; grid-template-columns: repeat(3, 1fr); background: var(--surface-2); border: 1px solid var(--line); border-radius: 10px; padding: 4px; gap: 4px; }
.seg button { border: 0; background: transparent; padding: .55rem .4rem; border-radius: 7px; justify-content: center; }
.seg button[aria-selected="true"] { background: var(--surface); box-shadow: var(--shadow); font-weight: 600; color: var(--primary); }
.code-input { font-size: 1.4rem; letter-spacing: .25em; text-align: center; direction: ltr; font-family: ui-monospace, Consolas, monospace; text-transform: uppercase; }
.demo-box { border: 1px dashed var(--amber); background: var(--amber-soft); border-radius: var(--r); padding: .8rem 1rem; display: grid; gap: .5rem; font-size: .9rem; }
.error { color: var(--red); font-size: .9rem; }

/* ---------- الهيكل العام ---------- */
.shell { display: grid; grid-template-columns: 250px 1fr; min-height: 100vh; }
.sidebar {
  background: var(--surface); border-left: 1px solid var(--line); padding: 1.2rem .8rem;
  position: sticky; top: env(safe-area-inset-top, 0px); height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem;
}
.brand { display: flex; gap: .65rem; align-items: center; padding: 0 .4rem; }
.brand .mark {
  width: 40px; height: 40px; border-radius: 10px; background: var(--primary); color: var(--primary-ink);
  display: grid; place-items: center; font-family: var(--font-display); font-size: 1.3rem; flex: none;
}
.brand .t { font-family: var(--font-display); font-weight: 600; line-height: 1.25; font-size: .98rem; }
.brand .s { color: var(--muted); font-size: .78rem; }
.nav { display: grid; gap: 2px; }
.nav a {
  display: flex; align-items: center; gap: .6rem; padding: .55rem .7rem; border-radius: 8px;
  color: var(--ink); text-decoration: none;
}
.nav a:hover { background: var(--surface-2); }
.nav a.active { background: var(--primary-soft); color: var(--primary); font-weight: 600; }
.nav .sec { font-size: .74rem; color: var(--muted); padding: .8rem .7rem .2rem; letter-spacing: .02em; }
.nav .badge { margin-inline-start: auto; }
.sidebar .me { margin-top: auto; border-top: 1px solid var(--line); padding-top: .8rem; display: grid; gap: .4rem; font-size: .88rem; }
.ico { width: 18px; height: 18px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.main { min-width: 0; padding-block: 1.4rem 3rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.main-inner { max-width: 1240px; margin: 0 auto; display: grid; gap: 1.2rem; }
.page-head { display: flex; gap: 1rem; align-items: flex-end; flex-wrap: wrap; }
.page-head .crumbs { font-size: .85rem; color: var(--muted); }
.page-head .crumbs a { color: var(--muted); }

.demo-banner {
  background: var(--amber-soft); color: var(--ink); border-bottom: 1px solid var(--line); font-size: .85rem;
  padding-block: .45rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
  text-align: center;
}

/* ---------- بطاقات ومؤشرات ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 1.1rem; min-width: 0; }
.card > h3 { margin-bottom: .8rem; }
.card-head { display: flex; align-items: center; gap: .6rem; margin-bottom: .8rem; flex-wrap: wrap; }
.grid { display: grid; gap: 1rem; }
.g2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: .8rem; }
.kpi { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: .85rem 1rem; display: grid; gap: .15rem; }
.kpi .l { color: var(--muted); font-size: .82rem; }
.kpi .v { font-size: 1.65rem; font-weight: 700; font-family: var(--font-display); line-height: 1.2; }
.kpi .d { font-size: .8rem; color: var(--muted); }
.kpi.good .v { color: var(--primary); } .kpi.bad .v { color: var(--red); } .kpi.pen .v { color: var(--pen); }

.chart-box { position: relative; height: 270px; }
.chart-box.tall { height: 340px; }
.chart-box.short { height: 210px; }

/* ---------- جداول ---------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: .5rem .65rem; text-align: right; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { background: var(--surface-2); font-weight: 600; font-size: .8rem; color: var(--muted); position: sticky; top: 0; z-index: 1; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.c, th.c { text-align: center; }
tfoot td { background: var(--surface-2); font-weight: 600; }
.grid-input { width: 4.4rem; text-align: center; padding: .3rem .2rem; direction: ltr; }
.grid-input.low { color: var(--red); border-color: var(--red); background: var(--red-soft); }
.link-row { cursor: pointer; }

/* علامات بلون قلم الأستاذ */
.mk { font-weight: 700; font-variant-numeric: tabular-nums; }
.mk.lo { color: var(--red); } .mk.mid { color: var(--amber); } .mk.hi { color: var(--primary); } .mk.top { color: var(--pen); }

.chip { display: inline-flex; align-items: center; gap: .3rem; font-size: .78rem; padding: .1rem .55rem; border-radius: 99px; border: 1px solid var(--line); background: var(--surface-2); white-space: nowrap; }
.chip.green { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.chip.red { background: var(--red-soft); color: var(--red); border-color: transparent; }
.chip.amber { background: var(--amber-soft); color: var(--amber); border-color: transparent; }
.chip.blue { background: var(--pen-soft); color: var(--pen); border-color: transparent; }
.badge { background: var(--red); color: #fff; font-size: .72rem; border-radius: 99px; padding: 0 .45rem; min-width: 1.3rem; text-align: center; font-weight: 700; }

/* ---------- تبويبات ---------- */
.tabs { display: flex; gap: .2rem; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: thin; }
.tabs a, .tabs button {
  padding: .6rem .9rem; border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: transparent;
  color: var(--muted); text-decoration: none; white-space: nowrap; font-weight: 500;
}
.tabs a.active, .tabs button.active { color: var(--primary); border-bottom-color: var(--primary); }

/* ---------- الحضور ---------- */
.att-list { display: grid; gap: .4rem; }
.att-row { display: grid; grid-template-columns: 2rem 1fr auto; gap: .6rem; align-items: center; padding: .45rem .6rem; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.att-row .n { color: var(--muted); font-size: .8rem; text-align: center; }
.att-opts { display: flex; gap: 3px; flex-wrap: wrap; }
.att-opts button { padding: .25rem .6rem; font-size: .82rem; }
.att-opts button[aria-pressed="true"][data-v="حاضر"] { background: var(--primary-soft); color: var(--primary); border-color: var(--primary); }
.att-opts button[aria-pressed="true"][data-v="غائب"] { background: var(--red-soft); color: var(--red); border-color: var(--red); }
.att-opts button[aria-pressed="true"][data-v="متأخر"] { background: var(--amber-soft); color: var(--amber); border-color: var(--amber); }
.att-opts button[aria-pressed="true"][data-v="غياب مبرر"] { background: var(--pen-soft); color: var(--pen); border-color: var(--pen); }
.att-row .reason { grid-column: 2 / -1; }

/* ---------- خريطة حرارية ---------- */
.heat td.h { text-align: center; font-weight: 600; min-width: 3.2rem; }

/* ---------- رسائل ---------- */
.chat { display: flex; flex-direction: column; gap: .5rem; max-height: 460px; overflow-y: auto; padding: .6rem; background: var(--surface-2); border-radius: var(--r); border: 1px solid var(--line); }
.bubble { max-width: 78%; padding: .5rem .8rem; border-radius: 12px; background: var(--surface); border: 1px solid var(--line); white-space: pre-wrap; overflow-wrap: anywhere; }
.bubble.me { align-self: flex-start; background: var(--primary-soft); border-color: transparent; }
.bubble.them { align-self: flex-end; }
.bubble .meta { font-size: .72rem; color: var(--muted); margin-top: .2rem; }
.inbox { display: grid; grid-template-columns: 300px 1fr; gap: 1rem; }
.inbox-list { display: grid; gap: 2px; align-content: start; max-height: 600px; overflow-y: auto; }
.inbox-list button { justify-content: space-between; text-align: right; border-color: transparent; width: 100%; }
.inbox-list button.active { background: var(--primary-soft); }

/* ---------- ملف التلميذ ---------- */
.student-head { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; }
.avatar { width: 58px; height: 58px; border-radius: 14px; background: var(--pen-soft); color: var(--pen); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.5rem; flex: none; }
.avatar.f { background: var(--red-soft); color: var(--red); }
.dl { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; font-size: .9rem; }
.dl dt { color: var(--muted); } .dl dd { margin: 0; }
.insight { border-inline-start: 3px solid var(--pen); padding: .35rem .8rem; background: var(--pen-soft); border-radius: 0 8px 8px 0; font-size: .92rem; }
.insight.warn { border-color: var(--red); background: var(--red-soft); }
.insight.good { border-color: var(--primary); background: var(--primary-soft); }

/* ---------- بطاقات الرمز السري ---------- */
.code-card { border: 2px dashed var(--line); border-radius: 12px; padding: 1rem; display: grid; gap: .3rem; text-align: center; background: var(--surface); break-inside: avoid; }
.code-card .code { font-family: ui-monospace, Consolas, monospace; font-size: 1.5rem; letter-spacing: .15em; direction: ltr; color: var(--pen); font-weight: 700; }
.code-sheet { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: .8rem; }

/* ---------- نوافذ ---------- */
.modal-back { position: fixed; inset: 0; background: rgba(10,16,24,.5); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: var(--surface); border-radius: 12px; width: min(720px, 100%); max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); }
.modal header { display: flex; align-items: center; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--surface); z-index: 2; }
.modal .body { padding: 1.2rem; display: grid; gap: 1rem; }
.toast { position: fixed; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 50%; transform: translateX(-50%); background: var(--ink); color: var(--bg); padding: .6rem 1.1rem; border-radius: 8px; z-index: 60; font-size: .92rem; box-shadow: var(--shadow); }
.toast.err { background: var(--red); color: #fff; }
.empty { text-align: center; color: var(--muted); padding: 2rem 1rem; border: 1px dashed var(--line); border-radius: var(--r); }
.loading { padding: 3rem; text-align: center; color: var(--muted); }


/* ===================== الإصدار 2 ===================== */
.link-btn { all: unset; cursor: pointer; color: var(--red); text-decoration: underline; font-size: inherit; }
.link-btn:focus-visible { outline: 2px solid var(--pen); }
button.armed, .btn-danger.armed { background: var(--red); color: #fff; border-color: var(--red); }
ul.tight { margin: .3rem 0 0; padding-inline-start: 1.1rem; display: grid; gap: .2rem; }
.seg.two { grid-template-columns: 1fr 1fr; }
.seg.two button[data-p="1"][aria-selected="true"] { color: var(--primary); }
.seg.two button[data-p="0"][aria-selected="true"] { color: var(--red); }

/* نافذة تسجيل السلوك */
.modal:has(.rec) { width: min(860px, 100%); }
.stu-grid { display: flex; flex-wrap: wrap; gap: 5px; max-height: 150px; overflow-y: auto; padding: 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); }
.stu { font-size: .84rem; padding: .25rem .6rem; border-radius: 99px; background: var(--surface); }
.stu.on { background: var(--pen); color: #fff; border-color: var(--pen); }
.beh-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)); gap: .6rem; max-height: 340px; overflow-y: auto; padding-inline-end: 4px; }
.beh-cat { border: 1px solid var(--line); border-radius: 10px; padding: .55rem .6rem; background: var(--surface); }
.beh-cat-h { font-weight: 600; font-size: .86rem; margin-bottom: .4rem; font-family: var(--font-display); }
.tone-red .beh-cat-h { color: var(--red); } .tone-amber .beh-cat-h { color: var(--amber); } .tone-blue .beh-cat-h { color: var(--pen); } .tone-green .beh-cat-h { color: var(--primary); }
.beh-items { display: flex; flex-wrap: wrap; gap: 4px; }
.beh-item { font-size: .82rem; padding: .28rem .55rem; border-radius: 7px; gap: .35rem; background: var(--surface-2); }
.beh-item.on { border-color: var(--ink); background: var(--ink); color: var(--bg); }
.sev-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; display: inline-block; }
.sev-dot.s1 { background: var(--amber); opacity: .6; } .sev-dot.s2 { background: var(--amber); } .sev-dot.s3 { background: var(--red); } .sev-dot.sp { background: var(--primary); }
.chip-btn { font-size: .8rem; padding: .2rem .6rem; border-radius: 99px; }
.chip-btn.on { background: var(--pen-soft); color: var(--pen); border-color: var(--pen); font-weight: 600; }
.beh-dot { width: 28px; height: 28px; border-radius: 8px; display: inline-grid; place-items: center; flex: none; }
.beh-dot .ico { width: 16px; height: 16px; }
.beh-dot.pos { background: var(--primary-soft); color: var(--primary); }
.beh-dot.sev1 { background: var(--amber-soft); color: var(--amber); }
.beh-dot.sev2 { background: var(--amber-soft); color: var(--amber); box-shadow: inset 0 0 0 1.5px var(--amber); }
.beh-dot.sev3 { background: var(--red-soft); color: var(--red); box-shadow: inset 0 0 0 1.5px var(--red); }

/* الخط الزمني للسلوك */
.timeline { display: grid; gap: .5rem; }
.tl-item { display: grid; grid-template-columns: 28px 1fr; gap: .7rem; padding: .6rem .7rem; border-radius: 10px; border: 1px solid var(--line); background: var(--surface); }
.tl-item.pos { border-inline-start: 3px solid var(--primary); }
.tl-item.neg.s1, .tl-item.neg.s2 { border-inline-start: 3px solid var(--amber); }
.tl-item.neg.s3 { border-inline-start: 3px solid var(--red); }
.tl-body { min-width: 0; display: grid; gap: .15rem; }

/* بطاقة المؤشر */
.risk-card { border-inline-start: 4px solid var(--primary); }
.risk-card.lvl-2 { border-inline-start-color: var(--amber); }
.risk-card.lvl-3 { border-inline-start-color: var(--red); background: linear-gradient(90deg, transparent 70%, var(--red-soft)); }
.risk-card a h3 { color: var(--ink); }

/* مكتبة الملفات */
.res-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: .8rem; }
.res-card { display: grid; grid-template-columns: 54px 1fr; grid-template-rows: 1fr auto; gap: .3rem .8rem; padding: .9rem; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); min-width: 0; }
.res-card h4 { margin: .2rem 0 0; font-size: .98rem; line-height: 1.45; font-family: var(--font-body); font-weight: 600; overflow-wrap: anywhere; }
.res-ico { grid-row: 1 / span 2; width: 54px; height: 64px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--line); display: grid; place-items: center; align-content: center; gap: 2px; color: var(--muted); font-size: .66rem; font-weight: 700; }
.res-ico .ico { width: 22px; height: 22px; }
.res-ico.red { color: var(--red); background: var(--red-soft); border-color: transparent; }
.res-ico.blue { color: var(--pen); background: var(--pen-soft); border-color: transparent; }
.res-ico.green { color: var(--primary); background: var(--primary-soft); border-color: transparent; }
.res-ico.amber { color: var(--amber); background: var(--amber-soft); border-color: transparent; }
.res-body { min-width: 0; display: grid; gap: .15rem; align-content: start; }
.res-act { display: flex; gap: .4rem; align-items: center; }
.drop { position: relative; display: grid; justify-items: center; gap: .3rem; padding: 1.4rem 1rem; border: 2px dashed var(--line); border-radius: 12px; text-align: center; cursor: pointer; background: var(--surface-2); transition: border-color .15s, background .15s; }
.drop:hover, .drop.over { border-color: var(--primary); background: var(--primary-soft); }
.drop input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.drop:focus-within { outline: 2px solid var(--pen); outline-offset: 2px; }
.drop-ico { width: 46px; height: 46px; border-radius: 50%; background: var(--surface); display: grid; place-items: center; color: var(--primary); }
.drop-ico .ico { width: 24px; height: 24px; }
.progress { height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; }
.progress > div { height: 100%; width: 0; background: var(--primary); transition: width .2s; }

.side-backdrop { position: fixed; inset: 0; background: rgba(10,16,24,.45); z-index: 35; }
.mobile-top { display: none; align-items: center; gap: .6rem; background: var(--surface); border-bottom: 1px solid var(--line); padding-block: .55rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }

@media (max-width: 960px) {
  .g3 { grid-template-columns: 1fr 1fr; }
  .inbox { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .login-wrap { grid-template-columns: 1fr; }
  .login-side { padding-block: 1.6rem; }
  .login-side ul { display: none; }
  .shell { grid-template-columns: 1fr; }
  .sidebar { position: fixed; inset: 0 0 0 auto; width: 280px; z-index: 40; transform: translateX(100%); transition: transform .2s; height: 100%; padding-top: calc(1.2rem + env(safe-area-inset-top, 0px)); }
  .sidebar.open { transform: none; box-shadow: -10px 0 40px rgba(0,0,0,.25); }
  .mobile-top { display: flex; align-items: center; gap: .6rem; position: sticky; top: env(safe-area-inset-top, 0px); z-index: 30; background: var(--surface); border-bottom: 1px solid var(--line); padding-block: .55rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
  .g2, .g3 { grid-template-columns: 1fr; }
  .att-row { grid-template-columns: 1.6rem 1fr; }
  .att-opts { grid-column: 1 / -1; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

@media print {
  .sidebar, .mobile-top, .demo-banner, .no-print, .tabs { display: none !important; }
  .shell { display: block; }
  body { background: #fff; color: #000; }
  .card, .code-card { border-color: #999; }
}

/* منع التمدد الأفقي على الهاتف */
.row > .tabs, .row > nav { min-width: 0; }
.modal { min-width: 0; }
.modal .row > input { flex: 1 1 120px; min-width: 0; }
.card-head > select { max-width: 100%; }
@media (max-width: 600px) {
  .card-head > select, .row > select { flex: 1 1 140px; width: auto; }
  .beh-cats { max-height: 300px; }
}
.main-inner > *, .stack > * { min-width: 0; }

/* ===================== البطاقة الشخصية والصورة ===================== */
img.avatar.photo { object-fit: cover; padding: 0; background: var(--surface-2); border: 1px solid var(--line); }
.avatar.xl { width: 150px; height: 150px; border-radius: 22px; font-size: 3.4rem; }
.file-top { display: grid; grid-template-columns: 190px 1fr; gap: 1.2rem; align-items: start; }
.photo-box { display: grid; justify-items: center; gap: .55rem; padding: .4rem; }
.photo-box .privacy { display: flex; gap: .3rem; align-items: flex-start; text-align: center; margin: 0; max-width: 22ch; }
.photo-box .privacy .ico { width: 14px; height: 14px; flex: none; margin-top: 3px; color: var(--primary); }
.file-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; }
.file-grid h3 .ico { color: var(--primary); }
.file-grid .dl dd { overflow-wrap: anywhere; }
.complete { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.complete .bar { width: 160px; height: 6px; background: var(--surface-2); border-radius: 99px; overflow: hidden; border: 1px solid var(--line); }
.complete .bar > div { height: 100%; background: var(--primary); }
fieldset.sf-sec { border: 0; padding: 0; margin: 0; min-width: 0; }
.modal:has(#sf) { width: min(820px, 100%); }
@media (max-width: 600px) { .file-top { grid-template-columns: 1fr; } .avatar.xl { width: 130px; height: 130px; } }

/* ===================== الإحصاء الرياضي ===================== */
.stat-t td:first-child { white-space: normal; min-width: 210px; }
.stat-t tr.grp td { background: var(--surface-2); font-weight: 700; color: var(--primary); font-size: .8rem; font-family: var(--font-display); }
.stat-t .hl { background: var(--pen-soft); font-weight: 600; }
.stat-t th.hl { color: var(--pen); }
table.corr td, table.corr th { font-size: .82rem; padding: .4rem .5rem; }
table.corr tbody th { background: var(--surface-2); text-align: right; }
svg.boxplot .bp-grid { stroke: var(--line); stroke-width: 1; }
svg.boxplot .bp-pass { stroke: var(--red); stroke-width: 1.2; stroke-dasharray: 4 3; }
svg.boxplot .bp-tick { fill: var(--muted); font-size: 11px; }
svg.boxplot .bp-label { fill: var(--ink); font-size: 11.5px; font-family: var(--font-body); }
svg.boxplot .bp-label.bold { font-weight: 700; }
svg.boxplot .bp-w { stroke: var(--muted); stroke-width: 1.4; }
svg.boxplot .bp-box { fill: var(--pen-soft); stroke: var(--pen); stroke-width: 1.4; }
svg.boxplot .bp-box.main { fill: var(--primary-soft); stroke: var(--primary); }
svg.boxplot .bp-med { stroke: var(--ink); stroke-width: 2.4; }
svg.boxplot .bp-mean { fill: var(--amber); stroke: var(--surface); stroke-width: 1; }
svg.boxplot .bp-out { fill: var(--red); font-size: 11px; }
.help-stats code { direction: ltr; unicode-bidi: isolate; display: inline-block; background: var(--surface-2); border: 1px solid var(--line); border-radius: 5px; padding: 0 .35rem; font-size: .88em; font-family: ui-monospace, Consolas, monospace; }
.help-stats .dl { grid-template-columns: 9rem 1fr; }

.mk, bdi { unicode-bidi: isolate; }
.mk { direction: ltr; }

/* ===================== الجولة التلقائية ===================== */
#tour { position: fixed; z-index: 80; left: 50%; transform: translateX(-50%); bottom: calc(14px + env(safe-area-inset-bottom, 0px)); width: min(760px, calc(100% - 24px)); background: var(--ink); color: var(--bg); border-radius: 14px; box-shadow: 0 18px 50px rgba(0,0,0,.35); overflow: hidden; }
#tour .tour-bar { height: 4px; background: rgba(255,255,255,.15); }
#tour #tour-prog { height: 100%; background: var(--primary); transition: width .4s; }
#tour .tour-in { display: flex; gap: 1rem; align-items: center; padding: .8rem 1rem; }
#tour .tour-txt { flex: 1; min-width: 0; display: grid; gap: .15rem; }
#tour .tour-meta { display: flex; gap: .5rem; align-items: center; }
#tour .tour-meta .chip { background: var(--primary); color: #fff; border: 0; }
#tour .tour-meta .muted { color: inherit; opacity: .7; }
#tour b { font-family: var(--font-display); font-size: 1.08rem; }
#tour p { margin: 0; opacity: .88; font-size: .92rem; line-height: 1.55; }
#tour .tour-ctl { display: flex; gap: 4px; flex: none; }
#tour .tour-ctl button { background: rgba(255,255,255,.12); color: inherit; border-color: transparent; min-width: 38px; justify-content: center; }
#tour .tour-ctl button.btn-primary { background: var(--primary); color: #fff; }
body.touring .main { padding-bottom: 150px; }
.tour-hl { box-shadow: 0 0 0 3px var(--amber) !important; border-radius: 8px; transition: box-shadow .3s; }
.tour-click { outline: 3px solid var(--amber) !important; outline-offset: 2px; }
.tour-cta { justify-content: center; padding: .75rem; font-size: 1.02rem; }
@media (max-width: 600px) { #tour .tour-in { flex-direction: column; align-items: stretch; } #tour .tour-ctl { justify-content: center; } }

/* ===================== الإحصاء المبسّط + التقرير الإحصائي ===================== */
.kpis.five { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
ul.read-list { margin: 0; padding-inline-start: 1.1rem; display: grid; gap: .5rem; line-height: 1.75; }
details.adv { border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); }
details.adv > summary { cursor: pointer; padding: .85rem 1rem; font-weight: 600; font-family: var(--font-display); display: flex; gap: .5rem; align-items: baseline; flex-wrap: wrap; list-style: none; }
details.adv > summary::-webkit-details-marker { display: none; }
details.adv > summary::before { content: "◂"; color: var(--primary); transition: transform .2s; display: inline-block; }
details.adv[open] > summary::before { transform: rotate(-90deg); }
details.adv > summary .muted { font-family: var(--font-body); font-weight: 400; }
details.adv .adv-body { padding: 0 1rem 1rem; }
.seg.four { grid-template-columns: repeat(4, auto); }
.seg.four button { padding-inline: .9rem; }
table.rep-t td.hl, table.rep-t th.hl { background: var(--pen-soft); }
table.rep-t td.hl2, table.rep-t th.hl2 { background: var(--primary-soft); }
tr.sum td { background: var(--surface-2); }
.note-card { border: 1px solid var(--line); border-inline-start: 3px solid var(--pen); border-radius: 8px; padding: .6rem .8rem; margin-bottom: .6rem; background: var(--surface-2); }
.note-card p { margin: .3rem 0 0; }
.note-form { border-top: 1px dashed var(--line); padding-top: .8rem; }
@media (max-width: 600px) { .seg.four { grid-template-columns: 1fr 1fr; width: 100%; } }

/* ---------- الملف الإداري للموظف ---------- */
.doc-cats { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: .6rem; }
.doc-cat { border: 1px dashed var(--line); border-radius: 10px; padding: .55rem .65rem; display: flex; flex-direction: column; gap: .35rem; min-width: 0; }
.doc-cat.has { border-style: solid; background: var(--surface-2); }
.doc-item { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .5rem; padding-top: .3rem; border-top: 1px solid var(--line); }
.doc-item .link-btn { font-weight: 600; text-align: start; color: var(--pen); text-decoration: none; }
.doc-item .link-btn:hover { text-decoration: underline; }
bdi.pos { color: var(--primary); font-weight: 600; } bdi.neg { color: var(--red); font-weight: 600; }

/* ---------- مسايرة البرنامج ---------- */
.prog-bar { position: relative; height: 10px; border-radius: 6px; background: var(--surface-2); border: 1px solid var(--line); overflow: visible; min-width: 120px; }
.prog-bar .done { height: 100%; border-radius: 6px; background: var(--primary); }
.prog-bar .exp { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--ink, #222); border-radius: 1px; }
.prog-item { display: flex; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; flex-wrap: wrap; }
.prog-item.ok { background: var(--primary-soft); border-color: transparent; }
.prog-item.late { border-color: var(--amber); }

/* ---------- المكتبة العمومية ---------- */
.lib-cta { justify-content: center; border-style: dashed; gap: .4rem; flex-wrap: wrap; }
.pub-wrap { min-height: 100vh; background: var(--bg); }
.pub-head { display: flex; align-items: center; gap: .8rem; padding: .8rem 1.2rem; background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; }
.pub-head .brand { padding: 0; }
.pub-main { max-width: 1100px; margin: 0 auto; padding: 1.2rem 16px 3rem; }

/* ---------- أقسام المكتبة ---------- */
.chip.violet { background: #efe7fb; color: #6b3fb5; border-color: transparent; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .chip.violet { background: #2c2140; color: #c6a8f5; } }
.lib-secs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
.lib-secs button { display: flex; align-items: center; gap: .6rem; padding: .75rem .9rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); cursor: pointer; text-align: start; color: var(--ink); font: inherit; }
.lib-secs button .ico { width: 26px; height: 26px; flex: none; color: var(--muted); }
.lib-secs button span { display: flex; flex-direction: column; min-width: 0; }
.lib-secs button small { color: var(--muted); font-size: .8rem; }
.lib-secs button[aria-selected="true"] { border-color: var(--primary); background: var(--primary-soft); box-shadow: inset 0 0 0 1px var(--primary); }
.lib-secs button[aria-selected="true"] .ico { color: var(--primary); }
.lib-group h3 { margin: .4rem 0 .6rem; font-size: 1.05rem; border-bottom: 2px solid var(--line); padding-bottom: .35rem; }
@media (max-width: 760px) { .lib-secs { grid-template-columns: 1fr 1fr; } }

/* ---------- المذكرات التربوية ---------- */
.subj-tabs { display: flex; flex-wrap: wrap; gap: .4rem; }
.subj-tabs button { display: inline-flex; align-items: center; gap: .4rem; padding: .45rem .75rem; border: 1px solid var(--line); border-radius: 999px; background: var(--surface); color: var(--ink); font: inherit; cursor: pointer; }
.subj-tabs button[aria-selected="true"] { background: var(--primary); color: #fff; border-color: var(--primary); }
.subj-tabs button[aria-selected="true"] .chip { background: rgba(255,255,255,.25); color: #fff; }
.plan-list { display: flex; flex-direction: column; gap: .5rem; }
.plan-row { display: flex; align-items: flex-start; gap: .75rem; padding: .65rem .8rem; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); }
.plan-row .res-ico { flex: none; }
.plan-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: .15rem; }
@media (max-width: 640px) { .plan-row { flex-wrap: wrap; } }

/* ---------------- المكتبة البيداغوجية — هادئة، منظّمة، لون واحد خفيف لكل مستوى ---------------- */
.lv-0 { --lv: #c0567f; } .lv-1 { --lv: #d0743a; } .lv-2 { --lv: #b18a24; } .lv-3 { --lv: #2e8c68; }
.lv-4 { --lv: #3a72bf; } .lv-5 { --lv: #7056bd; } .lv-g { --lv: #55667b; }
.lib-sec { margin-bottom: 1.4rem; }
.lib-sec h3 { display: flex; align-items: center; gap: .45rem; margin: .2rem 0 .7rem; font-size: 1.05rem; }
.lib-sec h3 .ico { color: var(--primary); }

/* رأس الصفحة */
.phero { --lv: var(--primary); background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 1.15rem 1.25rem 1.1rem; margin-bottom: 1.4rem; box-shadow: var(--shadow); display: grid; gap: .9rem; }
.phero.tinted { background: linear-gradient(160deg, color-mix(in srgb, var(--lv) 7%, var(--surface)) 0%, var(--surface) 65%); border-color: color-mix(in srgb, var(--lv) 18%, var(--line)); }
.phero-t { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.phero h1 { font-size: 1.45rem; font-weight: 700; letter-spacing: -.005em; }
.phero h2 { font-size: 1.15rem; }
.phero p { margin: .1rem 0 0; color: var(--muted); font-size: .9rem; }
.phero-ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; flex: none; background: var(--primary-soft); color: var(--primary); }
.phero-ic .ico { width: 26px; height: 26px; }
.phero.sm { padding: .6rem .9rem; margin: 1.4rem 0 .8rem; box-shadow: none; }
.pback { display: inline-flex; align-items: center; gap: .3rem; text-decoration: none; color: var(--muted); font-size: .88rem; font-weight: 600; padding: .25rem .7rem .25rem .55rem; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); }
.pback:hover { color: var(--lv); border-color: color-mix(in srgb, var(--lv) 40%, var(--line)); }
.pback .ico { width: 15px; height: 15px; }
.psearch { display: flex; align-items: center; gap: .55rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: 12px; padding: 0 .9rem; transition: border-color .15s, box-shadow .15s; }
.psearch:focus-within { border-color: color-mix(in srgb, var(--lv) 55%, var(--line)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--lv) 14%, transparent); background: var(--surface); }
.psearch .ico { color: var(--muted); }
.psearch input { border: 0; background: transparent; box-shadow: none; padding: .7rem 0; outline: none; width: 100%; }
.plbl { font: 600 .82rem/1 var(--font-body); color: var(--muted); letter-spacing: .02em; margin: 0 0 .7rem; }
#pd-res:empty { display: none; } #pd-res { margin-bottom: 1.4rem; }

/* بطاقات المستويات */
.plv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: .9rem; margin-bottom: 1.6rem; }
.plv-grid.one { grid-template-columns: minmax(232px, 480px); }
.plv { position: relative; display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "num txt go" "sum sum sum"; align-items: center; gap: .8rem .85rem;
  padding: 1rem 1.05rem .85rem; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow); transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease; }
.plv::before { content: ''; position: absolute; inset-inline: 1.05rem; top: 0; height: 3px; border-radius: 0 0 3px 3px; background: var(--lv); opacity: .75; }
.plv:hover, .plv:focus-visible { transform: translateY(-2px); border-color: color-mix(in srgb, var(--lv) 35%, var(--line)); box-shadow: 0 10px 26px color-mix(in srgb, var(--lv) 13%, transparent); outline: none; }
.plv-num { grid-area: num; width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; flex: none;
  background: color-mix(in srgb, var(--lv) 12%, var(--surface)); color: var(--lv); font: 700 1.35rem/1 var(--font-display); }
.plv-num .ico { width: 24px; height: 24px; }
.plv-num.lg { width: 56px; height: 56px; border-radius: 16px; font-size: 1.65rem; }
.plv-txt { grid-area: txt; display: grid; gap: .1rem; min-width: 0; }
.plv-txt b { font: 600 1.05rem/1.35 var(--font-display); }
.plv-txt small { color: var(--muted); font-size: .8rem; }
.plv-go { grid-area: go; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: var(--muted); background: var(--surface-2); transition: background .18s, color .18s; }
.plv:hover .plv-go { background: var(--lv); color: #fff; }
.plv-go .ico { width: 16px; height: 16px; }
.plv-sum { grid-area: sum; display: flex; gap: .3rem; flex-wrap: wrap; padding-top: .7rem; border-top: 1px dashed var(--line); }
.plv-sum span { display: inline-flex; align-items: center; gap: .3rem; font-size: .8rem; color: var(--muted); background: var(--surface-2); border-radius: 8px; padding: .18rem .5rem; font-variant-numeric: tabular-nums; }
.plv-sum .ico { width: 14px; height: 14px; color: var(--lv); }
.plegend { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; color: var(--muted); font-size: .8rem; margin: -.4rem 0 0; }
.plegend span { display: inline-flex; align-items: center; gap: .3rem; } .plegend .ico { width: 14px; height: 14px; }

/* صفحة المستوى: فهرس جانبي + أقسام */
.plib { display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 1.4rem; align-items: start; }
.pnav { position: sticky; top: 1rem; display: flex; flex-direction: column; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: .5rem; box-shadow: var(--shadow); }
.pnav-fam { font-size: .72rem; font-weight: 600; color: var(--muted); padding: .75rem .6rem .25rem; letter-spacing: .03em; }
.pnav button { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: .6rem; padding: .45rem .55rem; border-radius: 10px; color: var(--ink); font-size: .9rem; transition: background .15s; position: relative; }
.pnav button:hover { background: var(--surface-2); }
.pnav button:focus-visible { outline: 2px solid var(--c); outline-offset: 1px; }
.pnav button[aria-selected="true"] { background: color-mix(in srgb, var(--c) 10%, var(--surface)); font-weight: 600; }
.pnav button[aria-selected="true"]::before { content: ''; position: absolute; inset-inline-start: -.5rem; top: 22%; bottom: 22%; width: 3px; border-radius: 3px; background: var(--c); }
.pnav-ic { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 11%, var(--surface)); }
.pnav-ic .ico { width: 17px; height: 17px; }
.pnav-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pnav-n { font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; min-width: 1.5rem; text-align: center; padding: .05rem .4rem; border-radius: 999px; background: var(--surface-2); }
.pnav button[aria-selected="true"] .pnav-n { background: var(--c); color: #fff; }
.plib-body { display: grid; gap: 1.6rem; min-width: 0; }

.psec { scroll-margin-top: 1rem; }
.psec > header { display: flex; align-items: center; gap: .7rem; margin-bottom: .8rem; padding-bottom: .65rem; border-bottom: 1px solid var(--line); }
.psec-ic { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex: none; color: var(--c); background: color-mix(in srgb, var(--c) 11%, var(--surface)); }
.psec-ic .ico { width: 20px; height: 20px; }
.psec h3 { font-size: 1.05rem; font-weight: 600; }
.psec header p { margin: 0; color: var(--muted); font-size: .8rem; }
.psec header > div { min-width: 0; }
.psec-n { margin-inline-end: auto; }
.psec-n { font-size: .78rem; color: var(--c); font-weight: 600; background: color-mix(in srgb, var(--c) 9%, var(--surface)); border-radius: 999px; padding: .12rem .6rem; font-variant-numeric: tabular-nums; }

/* بطاقة الوثيقة */
.pdoc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: .7rem; }
.pdoc { display: flex; align-items: flex-start; gap: .75rem; padding: .8rem .85rem; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; transition: border-color .15s, box-shadow .15s; min-width: 0; }
.pdoc:hover { border-color: color-mix(in srgb, var(--c) 35%, var(--line)); box-shadow: 0 6px 18px rgba(20,33,51,.06); }
.pdoc-ft { width: 40px; height: 48px; border-radius: 9px; flex: none; display: grid; place-items: center; align-content: center; gap: 1px; position: relative; background: var(--ftb); color: var(--ftc); }
.pdoc-ft .ico { width: 20px; height: 20px; stroke-width: 1.6; }
.pdoc-ft em { font: 700 .58rem/1 var(--font-body); font-style: normal; letter-spacing: .03em; }
.ft-pdf { --ftc: #c2493d; --ftb: #fcecea; } .ft-doc { --ftc: #2f62b5; --ftb: #e8effb; } .ft-xls { --ftc: #23804f; --ftb: #e5f4ec; } .ft-ppt { --ftc: #c0632a; --ftb: #fcefe5; }
.pdoc-main { flex: 1; min-width: 0; display: grid; gap: .35rem; }
.pdoc h4 { font: 600 .93rem/1.45 var(--font-body); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pdoc-tags { display: flex; flex-wrap: wrap; gap: .25rem; }
.ptag { display: inline-flex; align-items: center; gap: .3rem; font-size: .74rem; color: var(--muted); background: var(--surface-2); border: 1px solid var(--line); border-radius: 6px; padding: .05rem .45rem; line-height: 1.6; }
.ptag i { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ptag .ico { width: 12px; height: 12px; }
.ptag.lv { color: var(--ink); font-weight: 600; }
.ptag.soft { border-color: transparent; background: transparent; padding-inline: .15rem; }
.pdoc-note { margin: 0; display: flex; gap: .3rem; align-items: flex-start; font-size: .76rem; line-height: 1.5; color: var(--muted); }
.pdoc-note .ico { width: 13px; height: 13px; margin-top: .2rem; color: var(--amber); }
.pdoc-act { display: flex; gap: .3rem; flex: none; align-self: center; }
.pbtn { width: 34px; height: 34px; padding: 0; justify-content: center; border-radius: 9px; color: var(--muted); background: var(--surface); }
.pbtn:hover { color: var(--ink); background: var(--surface-2); }
.pbtn.pri { background: var(--primary-soft); color: var(--primary); border-color: transparent; }
.pbtn.pri:hover { background: var(--primary); color: var(--primary-ink); }
.pbtn .ico, .pbtn svg { width: 17px; height: 17px; }

@media (max-width: 900px) {
  .plib { grid-template-columns: 1fr; gap: .9rem; }
  .pnav { position: static; flex-direction: row; flex-wrap: wrap; border-radius: 14px; padding: .45rem; gap: .35rem; }
  .pnav-fam { display: none; }
  .pnav button { flex: 1 1 calc(50% - .35rem); min-width: 0; padding: .4rem .5rem; border: 1px solid var(--line); font-size: .82rem; }
  .pnav-t { white-space: normal; line-height: 1.3; }
  .pnav button[aria-selected="true"] { border-color: color-mix(in srgb, var(--c) 45%, var(--line)); }
  .pnav button[aria-selected="true"]::before { display: none; }
  .pnav-ic { width: 26px; height: 26px; }
}
@media (max-width: 640px) {
  .phero { padding: .95rem; border-radius: 16px; } .phero h1 { font-size: 1.2rem; }
  .phero .row.no-print { width: 100%; } .phero .row.no-print > * { flex: 1; justify-content: center; }
  .plv-grid { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .plv { grid-template-columns: 1fr auto; grid-template-areas: "num go" "txt txt" "sum sum"; padding: .85rem .8rem .75rem; gap: .55rem; }
  .plv-num { width: 40px; height: 40px; font-size: 1.15rem; }
  .plv-txt b { font-size: .95rem; }
  .pdoc-grid { grid-template-columns: 1fr; }
}
:root[data-theme="dark"] .ft-pdf, :root[data-theme="dark"] .ft-doc, :root[data-theme="dark"] .ft-xls, :root[data-theme="dark"] .ft-ppt { --ftb: color-mix(in srgb, var(--ftc) 18%, var(--surface)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) :is(.ft-pdf, .ft-doc, .ft-xls, .ft-ppt) { --ftb: color-mix(in srgb, var(--ftc) 18%, var(--surface)); } }


.memo-strip { border-inline-start: 4px solid var(--primary); }
.memo-lv { border-color: color-mix(in srgb, var(--lv) 45%, var(--line)); color: var(--lv); font-weight: 700; }