/* ==========================================================================
   Sum Cloud POS — Help Center / Documentation theme
   Clean, professional, mobile-first. Sum Cloud POS orange accent.
   ========================================================================== */
:root{
  --d-bg:#ffffff; --d-ink:#1e293b; --d-soft:#475569; --d-muted:#64748b;
  --d-line:#e5e9f0; --d-surface:#f7f9fc; --d-surface2:#eef2f8;
  --d-orange:#e65c00; --d-orange-d:#d4380d; --d-navy:#0f172a;
  --d-accent:#e65c00; --d-accent-soft:#fff2e8;
  --d-green:#16a34a; --d-blue:#2563eb; --d-amber:#f59e0b; --d-red:#dc2626;
  --d-radius:12px; --d-shadow:0 1px 2px rgba(15,23,42,.05),0 8px 22px rgba(15,23,42,.06);
  --d-shadow-lg:0 20px 55px rgba(15,23,42,.13);
  --d-sans:"Inter",system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  --d-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --d-sidebar:280px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--d-sans);color:var(--d-ink);background:var(--d-bg);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--d-orange-d);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{font-family:"Poppins",var(--d-sans);line-height:1.25;color:var(--d-navy);margin:0 0 .5em}
h1{font-size:clamp(1.7rem,3vw,2.3rem);font-weight:700;letter-spacing:-.01em}
h2{font-size:1.45rem;font-weight:700;margin-top:2.2rem;scroll-margin-top:90px}
h3{font-size:1.12rem;font-weight:600;margin-top:1.6rem;scroll-margin-top:90px}
p{margin:0 0 1rem}
code{font-family:var(--d-mono);font-size:.86em;background:var(--d-surface2);padding:.12em .4em;border-radius:5px;color:#b91c1c;border:1px solid var(--d-line)}
.d-container{max-width:1280px;margin:0 auto;padding:0 20px}

/* ---------- Header ---------- */
.d-header{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.92);backdrop-filter:saturate(180%) blur(10px);border-bottom:1px solid var(--d-line)}
.d-nav{display:flex;align-items:center;gap:1rem;height:64px}
.d-brand{display:flex;align-items:center;gap:.6rem;flex-shrink:0}
.d-brand img{height:34px;width:auto}
.d-brand-badge{font-family:"Poppins";font-weight:700;font-size:.95rem;color:var(--d-navy);padding-left:.6rem;border-left:1px solid var(--d-line)}
.d-brand-badge b{color:var(--d-orange)}
.d-search-wrap{flex:1;max-width:520px;position:relative;margin:0 auto}
.d-search{width:100%;display:flex;align-items:center;gap:.5rem;background:var(--d-surface);border:1px solid var(--d-line);border-radius:10px;padding:.5rem .8rem}
.d-search:focus-within{border-color:var(--d-orange);box-shadow:0 0 0 3px rgba(230,92,0,.12);background:#fff}
.d-search input{border:none;background:none;outline:none;flex:1;font-size:.95rem;font-family:var(--d-sans);color:var(--d-ink)}
.d-search .ico{color:var(--d-muted);font-size:1.05rem}
.d-search kbd{font-family:var(--d-mono);font-size:.7rem;color:var(--d-muted);background:#fff;border:1px solid var(--d-line);border-radius:5px;padding:.1rem .35rem}
.d-nav-links{display:flex;align-items:center;gap:.3rem;flex-shrink:0}
.d-nav-links a{color:var(--d-soft);font-weight:500;font-size:.92rem;padding:.45rem .65rem;border-radius:8px}
.d-nav-links a:hover{background:var(--d-surface2);color:var(--d-ink);text-decoration:none}
.d-cta{background:var(--d-orange);color:#fff!important;padding:.5rem .9rem;border-radius:9px;font-weight:600}
.d-cta:hover{background:var(--d-orange-d);text-decoration:none}
/* search results dropdown */
.d-results{position:absolute;top:calc(100% + 8px);left:0;right:0;background:#fff;border:1px solid var(--d-line);border-radius:12px;box-shadow:var(--d-shadow-lg);max-height:60vh;overflow:auto;display:none;z-index:70}
.d-results.open{display:block}
.d-results a{display:block;padding:.7rem .9rem;border-bottom:1px solid var(--d-surface);color:var(--d-ink)}
.d-results a:hover{background:var(--d-surface);text-decoration:none}
.d-results .r-cat{font-size:.72rem;color:var(--d-orange);font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.d-results .r-title{font-weight:600}
.d-results .r-snip{font-size:.85rem;color:var(--d-muted)}
.d-results .r-empty{padding:1rem;color:var(--d-muted);font-size:.9rem}
.d-burger{display:none;background:none;border:1px solid var(--d-line);border-radius:8px;padding:.4rem .55rem;cursor:pointer;font-size:1.1rem}

/* ---------- Layout ---------- */
.d-layout{display:grid;grid-template-columns:var(--d-sidebar) 1fr;gap:0;max-width:1280px;margin:0 auto}
.d-sidebar{border-right:1px solid var(--d-line);padding:1.5rem 1rem 3rem;position:sticky;top:64px;height:calc(100vh - 64px);overflow-y:auto}
.d-sidebar .grp{margin-bottom:1.3rem}
.d-sidebar .grp-h{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--d-muted);padding:0 .6rem;margin-bottom:.35rem}
.d-sidebar a{display:flex;align-items:center;gap:.5rem;padding:.4rem .6rem;border-radius:8px;color:var(--d-soft);font-size:.92rem}
.d-sidebar a:hover{background:var(--d-surface);color:var(--d-ink);text-decoration:none}
.d-sidebar a.active{background:var(--d-accent-soft);color:var(--d-orange-d);font-weight:600}
.d-main{padding:1.8rem 2.4rem 4rem;min-width:0;max-width:900px}
.d-content{min-width:0}

/* ---------- Breadcrumb ---------- */
.d-crumb{font-size:.85rem;color:var(--d-muted);margin-bottom:1rem;display:flex;gap:.4rem;flex-wrap:wrap}
.d-crumb a{color:var(--d-muted)}
.d-crumb a:hover{color:var(--d-orange-d)}
.d-crumb .sep{opacity:.5}

/* ---------- Article ---------- */
.d-answer{background:var(--d-accent-soft);border:1px solid #ffd9bf;border-left:4px solid var(--d-orange);border-radius:10px;padding:1rem 1.2rem;margin:1.2rem 0}
.d-answer strong{color:var(--d-navy)}
.d-toc{background:var(--d-surface);border:1px solid var(--d-line);border-radius:12px;padding:1.1rem 1.3rem;margin:1.5rem 0}
.d-toc h4{margin:0 0 .5rem;font-size:.8rem;letter-spacing:.06em;text-transform:uppercase;color:var(--d-muted)}
.d-toc ul{margin:0;padding:0;list-style:none;columns:2;column-gap:1.5rem}
.d-toc li{margin:.2rem 0;break-inside:avoid}
.d-toc a{font-size:.9rem}
.d-steps{list-style:none;counter-reset:st;padding:0;margin:1rem 0}
.d-steps li{counter-increment:st;position:relative;padding:.35rem 0 .35rem 2.2rem;color:var(--d-soft)}
.d-steps li::before{content:counter(st);position:absolute;left:0;top:.3rem;width:1.5rem;height:1.5rem;background:var(--d-orange);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.78rem;font-weight:700}
.d-note{border-left:3px solid var(--d-blue);background:#eff6ff;padding:.7rem 1rem;border-radius:0 8px 8px 0;margin:1rem 0;font-size:.92rem;color:#1e3a8a}
.d-note.warn{border-color:var(--d-amber);background:#fffbeb;color:#92400e}
.d-note.tip{border-color:var(--d-green);background:#f0fdf4;color:#166534}
.d-shot{border:1px dashed var(--d-line);background:repeating-linear-gradient(45deg,#fafbfd,#fafbfd 10px,#f4f7fb 10px,#f4f7fb 20px);border-radius:10px;padding:1.4rem;text-align:center;color:var(--d-muted);font-size:.88rem;margin:1rem 0}
.d-shot .ico{font-size:1.5rem;display:block;margin-bottom:.3rem;opacity:.6}
.d-list{padding-left:0;list-style:none}
.d-list li{position:relative;padding:.25rem 0 .25rem 1.4rem;color:var(--d-soft)}
.d-list li::before{content:"\2713";position:absolute;left:0;color:var(--d-green);font-weight:700}
.d-table-wrap{overflow-x:auto;border:1px solid var(--d-line);border-radius:10px;margin:1rem 0}
table.d-table{width:100%;border-collapse:collapse;min-width:520px;background:#fff}
.d-table th,.d-table td{text-align:left;padding:.65rem .9rem;border-bottom:1px solid var(--d-line);font-size:.9rem;vertical-align:top}
.d-table th{background:var(--d-surface);font-weight:600;color:var(--d-navy)}
.d-table tr:last-child td{border-bottom:none}

/* ---------- Accordion (FAQ) ---------- */
.d-acc{border:1px solid var(--d-line);border-radius:10px;margin-bottom:.6rem;overflow:hidden;background:#fff}
.d-acc summary{cursor:pointer;padding:.85rem 1.1rem;font-weight:600;list-style:none;display:flex;justify-content:space-between;gap:1rem;color:var(--d-navy)}
.d-acc summary::-webkit-details-marker{display:none}
.d-acc summary::after{content:"+";color:var(--d-orange);font-size:1.2rem}
.d-acc[open] summary::after{content:"\2013"}
.d-acc .body{padding:0 1.1rem 1rem;color:var(--d-soft);font-size:.93rem}

/* ---------- Prev / Next + related ---------- */
.d-pager{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2.5rem}
.d-pager a{border:1px solid var(--d-line);border-radius:12px;padding:1rem 1.2rem;color:var(--d-ink)}
.d-pager a:hover{border-color:var(--d-orange);text-decoration:none;box-shadow:var(--d-shadow)}
.d-pager .lbl{font-size:.75rem;color:var(--d-muted);text-transform:uppercase;letter-spacing:.05em}
.d-pager .ttl{font-weight:600;color:var(--d-orange-d)}
.d-pager .next{text-align:right}
.d-related{margin-top:2rem;background:var(--d-surface);border-radius:12px;padding:1.2rem 1.4rem}
.d-related h4{margin:0 0 .6rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.05em;color:var(--d-muted)}
.d-related a{display:inline-block;margin:.2rem .6rem .2rem 0;font-size:.92rem}

/* ---------- Video ---------- */
.d-video{margin:1.6rem 0}
.d-video h2{margin-top:0}
.d-video-wrap{position:relative;padding-top:56.25%;border-radius:12px;overflow:hidden;border:1px solid var(--d-line);box-shadow:var(--d-shadow);background:#000}
.d-video-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.d-video-ph{border:1px dashed #f2c6ad;background:linear-gradient(135deg,#fff7f2,#fef2f2);border-radius:12px;padding:2.2rem 1rem;text-align:center}
.d-video-ph .play{width:64px;height:64px;border-radius:50%;background:#ff0000;color:#fff;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin:0 auto .8rem;box-shadow:0 10px 26px rgba(255,0,0,.28)}
.d-video-ph .lbl{color:var(--d-muted);font-size:.93rem;margin-bottom:1rem}
.d-video-ph a.btn{background:#ff0000;color:#fff;padding:.55rem 1.1rem;border-radius:9px;font-weight:600;display:inline-flex;gap:.45rem;align-items:center}
.d-video-ph a.btn:hover{background:#d90000;text-decoration:none;color:#fff}

/* ---------- Home ---------- */
.d-hero{background:radial-gradient(900px 300px at 80% -20%,rgba(230,92,0,.12),transparent),var(--d-surface);border-bottom:1px solid var(--d-line);padding:3rem 0 3.2rem;text-align:center}
.d-hero h1{margin-bottom:.5rem}
.d-hero p{color:var(--d-soft);max-width:620px;margin:0 auto 1.5rem;font-size:1.05rem}
.d-hero .d-search-wrap{max-width:620px}
.d-hero .d-search{padding:.8rem 1.1rem;font-size:1.05rem}
.d-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.d-card{display:block;background:#fff;border:1px solid var(--d-line);border-radius:var(--d-radius);padding:1.3rem;box-shadow:var(--d-shadow);transition:.15s}
.d-card:hover{transform:translateY(-3px);box-shadow:var(--d-shadow-lg);border-color:#ffcfae;text-decoration:none}
.d-card .ci{width:42px;height:42px;border-radius:10px;background:var(--d-accent-soft);color:var(--d-orange);display:flex;align-items:center;justify-content:center;font-size:1.3rem;margin-bottom:.8rem}
.d-card h3{font-size:1.02rem;margin:0 0 .25rem;color:var(--d-navy)}
.d-card p{font-size:.86rem;color:var(--d-muted);margin:0}
.d-sec-h{display:flex;align-items:baseline;justify-content:space-between;margin:2.5rem 0 1.1rem}
.d-sec-h h2{margin:0}
.d-poplist{display:grid;grid-template-columns:repeat(2,1fr);gap:.5rem 2rem}
.d-poplist a{display:flex;gap:.6rem;padding:.5rem 0;border-bottom:1px solid var(--d-surface2);color:var(--d-soft)}
.d-poplist a:hover{color:var(--d-orange-d);text-decoration:none}
.d-poplist a .n{color:var(--d-muted)}

/* ---------- Footer ---------- */
.d-footer{background:var(--d-navy);color:#94a3b8;padding:2.5rem 0 1.6rem;margin-top:3rem}
.d-footer a{color:#cbd5e1}
.d-footer a:hover{color:#fff}
.d-foot-grid{display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
.d-foot-links{display:flex;flex-wrap:wrap;gap:1.2rem;font-size:.9rem}
.d-foot-bottom{border-top:1px solid #1e293b;margin-top:1.5rem;padding-top:1rem;font-size:.85rem}

/* ---------- Responsive ---------- */
@media(max-width:980px){
  .d-layout{grid-template-columns:1fr}
  .d-sidebar{position:fixed;left:0;top:64px;width:300px;max-width:85vw;background:#fff;transform:translateX(-102%);transition:.2s;z-index:55;box-shadow:var(--d-shadow-lg)}
  .d-sidebar.open{transform:translateX(0)}
  .d-burger{display:inline-block}
  .d-nav-links .d-hide{display:none}
  .d-main{padding:1.5rem 1.2rem 3rem}
  .d-cards{grid-template-columns:repeat(2,1fr)}
  .d-toc ul{columns:1}
  .d-poplist{grid-template-columns:1fr}
}
@media(max-width:560px){
  .d-cards{grid-template-columns:1fr}
  .d-pager{grid-template-columns:1fr}
  .d-brand-badge{display:none}
}