/* landing.css — index.php Smart Cyber-Logistics Operation Center */
:root{--brand:#d4af37}
.shell{position:relative;z-index:1;max-width:1300px;margin:0 auto;padding:20px}

body::before{content:"";position:fixed;inset:0;background:radial-gradient(circle at 10% 10%,rgba(212,175,55,0.10) 0%,transparent 45%),radial-gradient(circle at 90% 90%,color-mix(in srgb,var(--brand) 6%,transparent) 0%,transparent 55%);pointer-events:none;z-index:0}

/* ============== TOP MAST ============== */
.hero-bar{
    display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
    padding:18px 28px;
    background:linear-gradient(180deg,rgba(255,255,255,0.96) 0%,rgba(250,248,242,0.96) 100%);
    border:1px solid var(--border);border-radius:36px;
    box-shadow:var(--shadow-md);
    -webkit-backdrop-filter:blur(16px);
    backdrop-filter:blur(16px);
    margin-bottom:22px;
    animation:brandEnter 0.6s cubic-bezier(0.34,1.56,0.64,1);
}
.hero-bar:hover{box-shadow:var(--shadow-pop)}
.hero-title{display:flex;align-items:center;gap:16px;font-size:19px;font-weight:800;color:var(--text);letter-spacing:-0.3px}
.hero-title .hero-mark{display:inline-flex;align-items:center;justify-content:center;width:54px;height:54px;border-radius:50%}
.hero-title .hero-mark .brand-mark{width:48px;height:48px}
.hero-title .pipe{width:3px;height:32px;background:linear-gradient(180deg,var(--gold) 0%,var(--gold-2) 100%);border-radius:2px;opacity:0.85}
.hero-title small{display:block;font-size:9px;letter-spacing:3px;color:var(--text-mute);font-weight:700;margin-top:4px;text-transform:uppercase}

.user-stack{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.user-stack .user-chip{
    display:flex;align-items:center;gap:10px;padding:6px 16px 6px 6px;
    background:var(--surface-3);border:1px solid var(--border);border-radius:24px;
    font-size:12px;font-weight:600;
}
.user-stack .user-chip .avatar{
    width:30px;height:30px;border-radius:50%;
    background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%);
    color:#1a1409;display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:11px;letter-spacing:0.3px;
    box-shadow:0 3px 8px rgba(212,175,55,0.30);
}

/* ============== STAT STRIP ============== */
.mast-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px}
.mast-stats .sm-stat{
    background:linear-gradient(180deg,#fff 0%,#faf8f2 100%);
    border:1px solid var(--border);border-radius:18px;
    padding:18px 18px;display:flex;align-items:center;gap:14px;
    transition:all var(--t);position:relative;overflow:hidden;
}
.mast-stats .sm-stat:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.mast-stats .sm-stat .icon{
    width:42px;height:42px;border-radius:12px;
    display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,var(--gold) 0%,var(--gold-2) 100%);
    color:#1a1409;flex-shrink:0;
}
.mast-stats .sm-stat:nth-child(2) .icon{background:linear-gradient(135deg,#34a853 0%,#1e7a3c 100%);color:#fff}
.mast-stats .sm-stat:nth-child(3) .icon{background:linear-gradient(135deg,#fbb930 0%,#d4a017 100%);color:#1a1409}
.mast-stats .sm-stat:nth-child(4) .icon{background:linear-gradient(135deg,#dc2626 0%,#a01616 100%);color:#fff}
.mast-stats .sm-stat .num{font-size:22px;font-weight:800;letter-spacing:-0.4px;line-height:1}
.mast-stats .sm-stat .lbl{font-size:10.5px;color:var(--text-mute);text-transform:uppercase;letter-spacing:1.4px;margin-top:4px;font-weight:700}

/* ============== WORKBENCH ============== */
.workbench{display:grid;grid-template-columns:1.2fr 1fr;gap:18px;margin-bottom:22px}

.tile{
    background:linear-gradient(180deg,#ffffff 0%,#faf8f2 100%);
    border:1px solid var(--border);border-radius:20px;
    padding:24px;box-shadow:var(--shadow-sm);
    transition:border-color var(--t),box-shadow var(--t);
    position:relative;overflow:hidden;
}
.tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--gold),var(--gold-2));opacity:0.6}
.tile.dark{
    background:linear-gradient(160deg,#1c1a14 0%,#2a261c 100%);
    color:#f5f0dc;border-color:#3a3424;
}
.tile.dark::before{background:linear-gradient(90deg,var(--gold-h),#806611)}
.tile.dark .form-control{background:#1a1812 !important;border-color:#3a3424 !important;color:#f5f0dc !important}
.tile.dark .form-control::placeholder{color:#8a8267}
.tile.dark .form-control:focus{border-color:var(--gold-h) !important;box-shadow:0 0 0 3px rgba(232,200,78,0.18) !important}
.tile.dark label{color:#a89668}

.tile-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid var(--border)}
.tile-head i.tile-icon{font-size:14px;color:#7d5915;width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#fff5d4,#f5e9c1);display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--gold-soft)}
.tile.dark .tile-head i.tile-icon{background:linear-gradient(135deg,#3a3424,#2a261c);color:var(--gold-h)}
.tile-head h6{font-size:13px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--text);margin:0}
.tile.dark .tile-head h6{color:#f5f0dc}
.tile-head small.opt{font-size:10px;color:var(--text-mute);margin-left:auto;font-weight:700;letter-spacing:0.5px}
.tile.dark .tile-head small.opt{color:#8a8267}

.form-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:14px}

/* QR result block */
.qr-result{
    margin-top:18px;padding:18px;
    background:radial-gradient(circle at 50% 50%,rgba(212,175,55,0.10) 0%,transparent 70%),#fff;
    border:1px dashed var(--gold-soft);border-radius:14px;
    text-align:center;animation:fadeIn 0.5s ease;
}
.qr-result img{display:inline-block;background:#fff;padding:10px;border-radius:12px;border:1px solid var(--border);box-shadow:var(--shadow-md);width:148px;height:148px}
.qr-result .meta{margin-top:10px;font-size:11.5px;color:var(--text-dim);font-family:'JetBrains Mono',monospace}
.qr-result .meta strong{color:var(--brand-2)}

/* ============== SECTION HEADER ============== */
.section-head{
    display:flex;align-items:flex-start;justify-content:space-between;gap:14px;flex-wrap:wrap;
    padding:18px 22px;
    background:linear-gradient(180deg,#fff 0%,#faf8f2 100%);
    border:1px solid var(--border);border-radius:18px;margin-bottom:14px;
}
.section-head h6{font-size:15px;font-weight:800;color:var(--text);letter-spacing:-0.3px;margin-bottom:2px}
.section-head .sub{font-size:12px;color:var(--text-dim)}
.section-head .right{display:flex;gap:10px;align-items:center}

/* ============== DATA TABLE ============== */
.data-table .seal-cell{font-family:'JetBrains Mono',monospace;color:var(--brand-2);font-weight:700;letter-spacing:0.3px}
.data-table .prod-cell{display:flex;align-items:center;gap:10px}
.data-table .prod-cell .mini-mark{width:24px;height:24px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:var(--surface-2);border:1px solid var(--border);flex-shrink:0;overflow:hidden}
.data-table .prod-cell .mini-mark .brand-mark{width:100%;height:100%}

@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes brandEnter{from{opacity:0;transform:translateY(20px) scale(0.96)}to{opacity:1;transform:translateY(0) scale(1)}}
.anim{animation:fadeIn 0.4s ease both}

@media(max-width:980px){
    .workbench{grid-template-columns:1fr}
    .mast-stats{grid-template-columns:1fr 1fr}
}
@media(max-width:600px){
    .mast-stats{grid-template-columns:1fr}
    .form-grid-2{grid-template-columns:1fr}
    .hero-title small{font-size:8px}
}