/* TRUDJ.net Secure (secrets.trudj.net) */
:root {
  --bg:#f3f5f8; --card:#fff; --ink:#0f1b2d; --muted:#556275; --line:#dfe4ec; --soft:#eef2f7;
  --blue:#0b5486; --blue-ink:#fff; --navy:#0f1b2d; --orange:#e2401a; --ok:#17734a; --bad:#b3261e; --warn:#8a5a00;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg:#0d131c; --card:#151d29; --ink:#e8edf4; --muted:#9aa7b8; --line:#253244; --soft:#1b2534;
    --blue:#6fb0e3; --blue-ink:#0d131c; --ok:#5fcf98; --bad:#f2948c; --warn:#f0c46a; }
}
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; display:flex; flex-direction:column; background:var(--bg); color:var(--ink);
  font:16px/1.6 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; }
a { color:var(--blue); }
h1 { font-size:clamp(24px,4.5vw,32px); line-height:1.2; margin:0 0 12px; letter-spacing:-.01em; }
h2 { font-size:19px; margin:0 0 10px; }
h3 { font-size:16px; margin:16px 0 6px; }
p { margin:0 0 12px; }
.muted { color:var(--muted); } .small { font-size:14px; }
code, .mono { font-family:var(--mono); font-size:.94em; }

/* header */
.top { background:#fff; border-bottom:1px solid #dfe4ec; }
.top::after { content:""; display:block; height:3px; background:linear-gradient(90deg, #0b5486 0 70%, #e2401a 70% 100%); }
.top-in { max-width:1120px; margin:0 auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px 20px; padding:10px 16px; }
.brand { display:flex; align-items:center; gap:10px; text-decoration:none; color:#0f1b2d; min-height:44px; }
.brand img { height:40px; width:auto; display:block; }
.brand b { font-size:20px; letter-spacing:.02em; color:#0b5486; }
.brand b::before { content:""; display:inline-block; width:12px; height:14px; margin-right:6px; vertical-align:-1px;
  background:#0b5486;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3 6V4a3 3 0 0 1 6 0v2h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm1.5 0h3V4a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 14'%3E%3Cpath d='M3 6V4a3 3 0 0 1 6 0v2h1a1 1 0 0 1 1 1v6a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V7a1 1 0 0 1 1-1zm1.5 0h3V4a1.5 1.5 0 0 0-3 0z'/%3E%3C/svg%3E") center/contain no-repeat; }
.top nav { display:flex; flex-wrap:wrap; align-items:center; gap:2px 4px; }
.top nav a, .top nav button.link { display:inline-flex; align-items:center; min-height:44px; padding:0 10px; color:#0f1b2d; text-decoration:none; border-radius:8px; font-weight:500; }
.top nav a:hover, .top nav button.link:hover { background:#eef2f7; }
.top nav a.on { color:#0b5486; box-shadow:inset 0 -2px 0 #0b5486; border-radius:0; }
.top nav .admin-link { color:#e2401a; }
.menu-toggle { display:none; }
@media (max-width:760px) {
  .top nav { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:2px; padding-bottom:6px; }
  .top nav form { grid-column:span 2; }
}

/* layout */
.wrap { flex:1; width:100%; max-width:1120px; margin:0 auto; padding:24px 16px 40px; }
.panel { background:var(--card); border:1px solid var(--line); border-radius:14px; padding:20px; margin-bottom:16px; }
.panel.soft { background:var(--soft); }
.panel.narrow { max-width:460px; margin:24px auto; }
.panel.mid { max-width:760px; margin:16px auto; }
.grid2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,400px),1fr)); gap:16px; align-items:start; }
.grid3 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:14px; }
.head-row { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.stat { background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px 16px; text-decoration:none; color:var(--ink); display:block; }
.stat b { display:block; font-size:28px; line-height:1.1; color:var(--blue); }
.stat span { color:var(--muted); font-size:14px; }

/* forms */
.f { display:block; margin:0 0 14px; } .f > span { display:block; font-weight:600; margin-bottom:4px; } .f small { display:block; color:var(--muted); margin-bottom:4px; }
input[type=text],input[type=email],input[type=password],input[type=tel],input[type=number],input[type=date],select,textarea {
  width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--card); color:var(--ink); font:inherit; }
textarea { min-height:160px; resize:vertical; font-family:var(--mono); font-size:15px; line-height:1.5; }
input:focus, select:focus, textarea:focus { outline:2px solid var(--blue); outline-offset:1px; border-color:transparent; }
fieldset { border:1px solid var(--line); border-radius:12px; margin:0 0 14px; padding:12px 14px 4px; min-width:0; }
legend { font-weight:600; padding:0 6px; }
.check { display:flex; gap:10px; align-items:flex-start; margin:0 0 10px; min-height:32px; cursor:pointer; }
.check input { width:20px; height:20px; margin-top:2px; flex:none; accent-color:var(--blue); }
.check small { display:block; color:var(--muted); }
.row2 { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr)); gap:0 14px; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 18px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); font:inherit; font-weight:600; cursor:pointer; text-decoration:none; }
.btn.primary { background:var(--blue); border-color:var(--blue); color:var(--blue-ink); }
.btn.danger { border-color:var(--bad); color:var(--bad); background:transparent; }
.btn.ghost { background:transparent; } .btn.sm { min-height:36px; padding:4px 12px; font-size:14px; }
.btn[disabled] { opacity:.55; cursor:not-allowed; }
.btn-row { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:10px 0; }
button.link { background:none; border:0; padding:0; color:var(--blue); font:inherit; cursor:pointer; text-decoration:underline; }
form.inline { display:inline; }
.hidden { display:none !important; }

/* messages */
.flash { padding:12px 14px; border-radius:10px; margin:0 0 14px; background:#e7f4ec; color:#0e4f31; border:1px solid #bfe3cd; }
.flash.error { background:#fbeceb; color:#7d1b15; border-color:#f1c4c0; }
.flash.warn { background:#fff6e0; color:#5f3d00; border-color:#f1dca6; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .flash { background:#123323; color:#bfeed4; border-color:#1f5a3c; }
  :root:not([data-theme="light"]) .flash.error { background:#3a1715; color:#ffd0cb; border-color:#6c2a25; }
  :root:not([data-theme="light"]) .flash.warn { background:#3a2c0d; color:#ffe3a6; border-color:#6a5016; } }
.tag { display:inline-block; padding:1px 9px; border-radius:999px; font-size:13px; font-weight:600; background:var(--soft); color:var(--muted); white-space:nowrap; }
.tag.active,.tag.ok { background:#e2f2e9; color:#17734a; } .tag.waiting { background:#e6eef7; color:#0b5486; }
.tag.dead,.tag.off { background:#f4e4e3; color:#9b2a22; } .tag.draft { background:#f0eadb; color:#7a5b10; } .tag.keep { background:#fde6dd; color:#a9330f; }

/* tables */
.table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:12px; background:var(--card); }
table { width:100%; border-collapse:collapse; font-size:15px; }
th, td { text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top; }
th { font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); background:var(--soft); white-space:nowrap; }
tr:last-child td { border-bottom:0; }
td.nowrap, .nowrap { white-space:nowrap; }
dl.meta { display:grid; grid-template-columns:max-content 1fr; gap:6px 16px; margin:0; }
dl.meta dt { color:var(--muted); } dl.meta dd { margin:0; overflow-wrap:anywhere; }
@media (max-width:520px) { dl.meta { grid-template-columns:1fr; gap:0; } dl.meta dd { margin-bottom:8px; } }

/* secure content */
.secret { white-space:pre-wrap; overflow-wrap:anywhere; font-family:var(--mono); font-size:15px; background:var(--soft); border:1px solid var(--line);
  border-radius:12px; padding:16px; margin:0 0 12px; max-height:70vh; overflow:auto; }
.files { list-style:none; padding:0; margin:0 0 12px; }
.files li { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:8px; padding:10px 0; border-bottom:1px solid var(--line); }
.files li:last-child { border-bottom:0; }
.files .name { font-weight:600; overflow-wrap:anywhere; min-width:0; flex:1 1 200px; }
.linkbox { display:flex; gap:8px; flex-wrap:wrap; }
.linkbox input { flex:1 1 260px; font-family:var(--mono); font-size:14px; }
.codes { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:6px; font-family:var(--mono); margin:10px 0; }
.qr svg { width:200px; height:200px; max-width:100%; background:#fff; padding:6px; border-radius:8px; }

/* uploader */
.drop { border:2px dashed var(--line); border-radius:14px; padding:18px; text-align:center; background:var(--soft); }
.drop.over { border-color:var(--blue); }
.drop label.btn { cursor:pointer; }
.uplist { list-style:none; margin:10px 0 0; padding:0; text-align:left; }
.uplist li { padding:8px 0; border-bottom:1px solid var(--line); }
.uplist .bar { height:6px; background:var(--line); border-radius:999px; overflow:hidden; margin-top:4px; }
.uplist .bar i { display:block; height:100%; width:0; background:var(--blue); transition:width .2s; }
.uplist .err { color:var(--bad); font-size:14px; }

/* landing */
body.landing .wrap { max-width:1040px; }
.hero { display:grid; grid-template-columns:1.25fr 1fr; gap:28px; align-items:center; padding:20px 0 8px; }
@media (max-width:820px) { .hero { grid-template-columns:1fr; } }
.eyebrow { text-transform:uppercase; letter-spacing:.14em; font-size:12px; font-weight:700; color:var(--orange); margin:0 0 10px; }
.hero h1 { font-size:clamp(30px,6vw,46px); line-height:1.08; margin-bottom:16px; }
.lead { font-size:18px; color:var(--muted); }
.lock-card { background:var(--navy); color:#dfe9f5; border-radius:18px; padding:22px; font-family:var(--mono); font-size:14px; line-height:1.7;
  box-shadow:0 18px 40px -24px rgba(11,84,134,.6); overflow-wrap:anywhere; }
.lock-card .k { color:#7fb7e6; } .lock-card .o { color:#ff8a66; } .lock-card .g { color:#7fd3a3; }
.steps { counter-reset:s; display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr)); gap:14px; margin:24px 0; }
.steps .panel { margin:0; position:relative; padding-top:44px; }
.steps .panel::before { counter-increment:s; content:counter(s); position:absolute; top:14px; left:20px; width:24px; height:24px; border-radius:50%;
  background:var(--blue); color:var(--blue-ink); font-weight:700; font-size:14px; display:grid; place-items:center; }
.points { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr)); gap:4px 24px; padding:0; list-style:none; }
.points li { padding:6px 0 6px 26px; position:relative; }
.points li::before { content:""; position:absolute; left:2px; top:13px; width:12px; height:7px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok); transform:rotate(-45deg); }

/* footer */
.foot { border-top:1px solid var(--line); background:var(--card); }
.foot-in { max-width:1120px; margin:0 auto; padding:18px 16px; display:flex; flex-wrap:wrap; gap:14px 28px; align-items:center; justify-content:space-between; font-size:14px; color:var(--muted); }
.foot a { color:inherit; }
.foot .stc { display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--muted); }
.foot .stc img { height:48px; width:auto; background:#fff; border-radius:8px; padding:4px 6px; }
.foot nav { display:flex; flex-wrap:wrap; gap:4px 16px; }
.foot nav a { min-height:32px; display:inline-flex; align-items:center; }
.mt { margin-top:16px; } .mb0 { margin-bottom:0; }
.code-in { max-width:150px; } .code-in.wide { max-width:220px; } .mb { margin-bottom:12px; }
.btn-row.center { justify-content:center; }
code { overflow-wrap:anywhere; }