:root{
    --bg:#E7DFD2;--card:#FBF8F1;--card2:#F4EEE3;
    --border:#D8CDB8;--border2:#C9BEA9;
    --ink:#1C1A18;--ink-dim:#4A453C;
    --caution:#8C7B52;--caution-glow:rgba(140,123,82,0.18);
    --accent-2:#B33A3A;--accent-2-glow:rgba(179,58,58,0.14);
    --success:#4C6B4C;
    --text:#1C1A18;--text-dim:#6B6459;--text-muted:#948A76;
    --ff-head:'Playfair Display',serif;--ff-body:'Inter',sans-serif;--ff-mono:'JetBrains Mono',monospace;
    --r:8px;--r-lg:14px;
    --sh-lg:0 8px 48px rgba(28,26,24,0.16);
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}

  body{
    font-family:var(--ff-body);font-size:14px;line-height:1.6;
    background:var(--bg);color:var(--text);
    min-height:100vh;overflow-x:hidden;
    display:flex;flex-direction:column;justify-content:center;align-items:center;
    padding:20px 16px;position:relative;
  }

  body::before{
    content:'';position:fixed;inset:0;z-index:0;
    background-image:
      linear-gradient(rgba(28,26,24,0.035) 1px,transparent 1px),
      linear-gradient(90deg,rgba(28,26,24,0.035) 1px,transparent 1px);
    background-size:40px 40px;pointer-events:none;
    animation:gridDrift 20s linear infinite;
  }
  @keyframes gridDrift{0%{background-position:0 0}100%{background-position:40px 40px}}

  .orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;filter:blur(100px);}
  .orb1{width:500px;height:500px;background:rgba(140,123,82,0.10);top:-120px;right:-120px;}
  .orb2{width:400px;height:400px;background:rgba(28,26,24,0.05);bottom:-100px;left:-100px;}
  .orb3{width:300px;height:300px;background:rgba(179,58,58,0.04);top:50%;left:50%;transform:translate(-50%,-50%);}

  /* ── boot loader ── */
  #app-loader{
    position:fixed;inset:0;z-index:9999;background:var(--bg);
    display:flex;align-items:center;justify-content:center;
    flex-direction:column;gap:28px;
    transition:opacity 0.6s ease,transform 0.6s ease;
  }
  #app-loader.hide{opacity:0;transform:scale(1.04);pointer-events:none;}
  .loader-rings{position:relative;width:100px;height:100px;display:flex;align-items:center;justify-content:center;}
  .loader-ring{position:absolute;border-radius:50%;border:2px solid transparent;animation:ringRotate linear infinite;}
  .loader-ring:nth-child(1){width:100px;height:100px;border-top-color:var(--ink);border-right-color:var(--ink);animation-duration:1.4s;box-shadow:0 0 20px rgba(28,26,24,0.15),inset 0 0 20px rgba(28,26,24,0.1);}
  .loader-ring:nth-child(2){width:76px;height:76px;border-bottom-color:var(--caution);border-left-color:var(--caution);animation-duration:1s;animation-direction:reverse;box-shadow:0 0 16px var(--caution-glow);}
  .loader-ring:nth-child(3){width:52px;height:52px;border-top-color:var(--accent-2);border-right-color:var(--accent-2);animation-duration:0.7s;box-shadow:0 0 12px var(--accent-2-glow);}
  .loader-core{width:20px;height:20px;border-radius:50%;background:radial-gradient(circle,var(--ink) 0%,var(--caution) 100%);box-shadow:0 0 20px rgba(28,26,24,.4),0 0 40px var(--caution-glow);animation:corePulse 1.4s ease-in-out infinite;}
  @keyframes ringRotate{to{transform:rotate(360deg)}}
  @keyframes corePulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.3);opacity:0.7}}
  .loader-title{font-family:var(--ff-head);font-size:20px;font-weight:800;letter-spacing:3px;text-transform:uppercase;color:var(--ink);}
  .loader-sub{font-family:var(--ff-mono);font-size:11px;color:var(--text-dim);letter-spacing:2px;text-transform:uppercase;margin-top:6px;text-align:center;}
  .loader-bar-wrap{width:220px;height:2px;background:var(--border);border-radius:2px;overflow:hidden;}
  .loader-bar{height:100%;width:0;background:linear-gradient(90deg,var(--ink),var(--caution));border-radius:2px;animation:loadProgress 2.2s ease-out forwards;box-shadow:0 0 10px rgba(28,26,24,.3);}
  @keyframes loadProgress{0%{width:0}30%{width:35%}60%{width:65%}85%{width:88%}100%{width:100%}}
  .loader-dots{display:flex;gap:8px;}
  .loader-dot{width:6px;height:6px;border-radius:50%;background:var(--border2);animation:dotBlink 1.4s ease-in-out infinite;}
  .loader-dot:nth-child(1){animation-delay:0s;background:var(--ink)}
  .loader-dot:nth-child(2){animation-delay:0.2s;background:var(--caution)}
  .loader-dot:nth-child(3){animation-delay:0.4s;background:var(--accent-2)}
  .loader-dot:nth-child(4){animation-delay:0.6s}
  .loader-dot:nth-child(5){animation-delay:0.8s}
  @keyframes dotBlink{0%,80%,100%{transform:scale(1);opacity:0.4}40%{transform:scale(1.6);opacity:1}}
  .loader-scanline{position:absolute;inset:0;pointer-events:none;overflow:hidden;}
  .loader-scanline::after{content:'';position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--caution),transparent);animation:scanMove 2s linear infinite;opacity:0.4;}
  @keyframes scanMove{0%{top:-2px}100%{top:100%}}

  /* ── processing overlay ── */
  #proc-loader{
    position:fixed;inset:0;z-index:9998;
    background:rgba(231,223,210,0.92);backdrop-filter:blur(8px);
    display:none;align-items:center;justify-content:center;flex-direction:column;gap:20px;
  }
  #proc-loader.show{display:flex;}
  .proc-rings{position:relative;width:70px;height:70px;display:flex;align-items:center;justify-content:center;}
  .proc-ring{position:absolute;border-radius:50%;border:2px solid transparent;animation:ringRotate linear infinite;}
  .proc-ring:nth-child(1){width:70px;height:70px;border-top-color:var(--ink);border-right-color:var(--ink);animation-duration:1.2s;}
  .proc-ring:nth-child(2){width:52px;height:52px;border-bottom-color:var(--caution);border-left-color:var(--caution);animation-duration:0.9s;animation-direction:reverse;}
  .proc-ring:nth-child(3){width:34px;height:34px;border-top-color:var(--accent-2);border-right-color:var(--accent-2);animation-duration:0.6s;}
  .proc-core{width:12px;height:12px;border-radius:50%;background:radial-gradient(circle,var(--ink),var(--caution));box-shadow:0 0 12px rgba(28,26,24,.3);animation:corePulse 1.2s ease-in-out infinite;}
  .proc-text{font-family:var(--ff-mono);font-size:11px;color:var(--ink);letter-spacing:2px;text-transform:uppercase;}

  /* ── login UI ── */
  #login-ui{position:relative;z-index:1;width:100%;max-width:500px;display:none;animation:uiReveal 0.5s ease forwards;}
  @keyframes uiReveal{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

  .sys-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;padding:0 2px;}
  .sys-bar-left{display:flex;align-items:center;gap:10px;}
  .back-to-hub{
    display:inline-flex;align-items:center;gap:7px;margin-bottom:14px;padding:0 2px;
    font-family:var(--ff-mono);font-size:11px;letter-spacing:.5px;color:var(--text-muted);
    transition:color .15s;
  }
  .back-to-hub:hover{color:var(--caution);}
  .sys-id{font-family:var(--ff-mono);font-size:10px;color:var(--caution);letter-spacing:2px;text-transform:uppercase;opacity:0.85;}
  .sys-status{display:flex;align-items:center;gap:6px;font-family:var(--ff-mono);font-size:9px;color:var(--success);letter-spacing:1px;text-transform:uppercase;}
  .pulse-dot{width:5px;height:5px;border-radius:50%;background:var(--success);box-shadow:0 0 6px var(--success);animation:pulseDot 2s infinite;}
  @keyframes pulseDot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:0.4;transform:scale(0.7)}}
  .sys-clock{font-family:var(--ff-mono);font-size:10px;color:var(--text-muted);letter-spacing:1px;}

  .login-card{background:var(--card);border:1px solid var(--border2);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-lg);position:relative;}
  .login-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;z-index:2;background:linear-gradient(90deg,transparent 0%,var(--ink) 30%,var(--caution) 70%,transparent 100%);}

  .card-hd{background:linear-gradient(135deg,rgba(28,26,24,0.05) 0%,rgba(140,123,82,0.08) 100%);border-bottom:1px solid var(--border);padding:30px 32px 24px;position:relative;overflow:hidden;text-align:center;}
  .corner{position:absolute;width:16px;height:16px;}
  .corner-tl{top:10px;left:10px;border-top:2px solid var(--ink);border-left:2px solid var(--ink);}
  .corner-tr{top:10px;right:10px;border-top:2px solid var(--ink);border-right:2px solid var(--ink);}
  .corner-bl{bottom:10px;left:10px;border-bottom:2px solid var(--caution);border-left:2px solid var(--caution);}
  .corner-br{bottom:10px;right:10px;border-bottom:2px solid var(--caution);border-right:2px solid var(--caution);}

  .icon-ring{width:76px;height:76px;border-radius:50%;margin:0 auto 18px;position:relative;display:flex;align-items:center;justify-content:center;}
  .icon-ring::before{content:'';position:absolute;inset:-3px;border-radius:50%;background:conic-gradient(var(--ink),var(--caution),var(--accent-2),var(--ink));animation:spinBorder 4s linear infinite;}
  @keyframes spinBorder{to{transform:rotate(360deg)}}
  .icon-ring::after{content:'';position:absolute;inset:2px;border-radius:50%;background:var(--card2);z-index:0;}
  .icon-ring i{font-size:26px;color:var(--ink);position:relative;z-index:1;}

  .card-title{font-family:var(--ff-head);font-size:22px;font-weight:800;letter-spacing:2px;color:var(--ink);margin-bottom:6px;position:relative;z-index:1;}
  .card-sub{font-family:var(--ff-mono);font-size:10px;color:var(--text-muted);letter-spacing:2px;text-transform:uppercase;position:relative;z-index:1;}

  .hd-divider{display:flex;align-items:center;gap:10px;margin-top:18px;position:relative;z-index:1;}
  .hd-divider-line{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--border2));}
  .hd-divider-line.r{background:linear-gradient(90deg,var(--border2),transparent);}
  .hd-divider-tag{font-family:var(--ff-mono);font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--text-muted);background:var(--card2);border:1px solid var(--border2);border-radius:4px;padding:3px 10px;}

  .card-bd{padding:28px 32px 32px;position:relative;z-index:2;}

  .alert{display:none;align-items:center;gap:10px;padding:10px 14px;border-radius:var(--r);margin-bottom:18px;font-size:13px;border-left:2px solid;font-family:var(--ff-body);}
  .alert.show{display:flex;}
  .alert-error{background:rgba(179,58,58,0.06);border-color:var(--accent-2);color:var(--accent-2);}
  .alert-success{background:rgba(76,107,76,0.08);border-color:var(--success);color:var(--success);}

  .sec-lbl{font-family:var(--ff-mono);font-size:9px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--caution);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
  .sec-lbl::before,.sec-lbl::after{content:'';flex:1;height:1px;background:var(--border);}

  .fg{display:flex;flex-direction:column;gap:7px;margin-bottom:16px;}
  .fl{font-family:var(--ff-mono);font-size:10px;font-weight:500;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:6px;}
  .fl i{color:var(--caution);font-size:11px;}

  .input-wrap{position:relative;display:flex;align-items:center;}
  .input-ico{position:absolute;left:14px;color:var(--caution);font-size:13px;z-index:1;pointer-events:none;transition:color 0.2s;}

  .form-input{width:100%;padding:12px 14px 12px 44px;background:var(--bg);border:1px solid var(--border2);border-radius:var(--r);color:var(--text);font-family:var(--ff-body);font-size:13.5px;transition:border-color 0.2s,box-shadow 0.2s;outline:none;}
  .form-input:hover{border-color:var(--ink-dim);}
  .form-input:focus{border-color:var(--ink);box-shadow:0 0 0 3px rgba(28,26,24,0.06);}
  .form-input::placeholder{color:var(--text-muted);}
  .form-input.error{border-color:var(--accent-2);box-shadow:0 0 0 3px rgba(179,58,58,0.08);}

  .toggle-pwd{position:absolute;right:12px;background:none;border:none;cursor:pointer;color:var(--text-muted);font-size:13px;padding:4px;z-index:1;transition:color 0.2s;}
  .toggle-pwd:hover{color:var(--ink);}

  .opt-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:22px;}
  .rem-label{display:flex;align-items:center;gap:8px;cursor:pointer;font-size:13px;color:var(--text-dim);}
  .rem-label input{width:15px;height:15px;accent-color:var(--ink);cursor:pointer;}
  .enc-tag{font-family:var(--ff-mono);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:var(--text-muted);display:flex;align-items:center;gap:5px;}
  .enc-tag i{color:var(--caution);font-size:10px;}

  .btn-signin{width:100%;padding:14px;background:var(--ink);color:var(--card);border:none;border-radius:var(--r);font-family:var(--ff-head);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:10px;transition:all 0.2s ease;box-shadow:0 4px 0 #000;}
  .btn-signin:hover{transform:translateY(-2px);}
  .btn-signin:active{transform:translateY(3px);box-shadow:0 1px 0 #000;}
  .btn-signin:disabled{opacity:0.5;cursor:not-allowed;transform:none;}

  .links-row{display:flex;align-items:center;justify-content:space-between;margin-top:18px;font-family:var(--ff-mono);font-size:11.5px;}
  .links-row a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--border2);padding-bottom:1px;}
  .links-row a:hover{border-color:var(--ink);}

  .stat-strip{display:flex;gap:0;margin-top:14px;border:1px solid var(--border);border-radius:var(--r);overflow:hidden;background:var(--card2);}
  .stat-cell{flex:1;padding:8px 10px;text-align:center;border-right:1px solid var(--border);font-family:var(--ff-mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;}
  .stat-cell:last-child{border-right:none;}
  .stat-cell-val{font-size:13px;font-weight:700;font-family:var(--ff-head);color:var(--ink);display:block;margin-bottom:2px;}
  .stat-cell-lbl{color:var(--text-muted);}

  .site-footer{position:relative;z-index:1;margin-top:18px;width:100%;max-width:440px;border-top:1px solid var(--border);}
  .sf-inner{padding:18px 4px 4px;}
  .sf-top{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;padding-bottom:14px;}
  .sf-brand{display:flex;align-items:center;gap:8px;}
  .sf-logo{width:26px;height:26px;border-radius:6px;background:var(--ink);color:var(--card);display:flex;align-items:center;justify-content:center;font-family:var(--ff-head);font-weight:800;font-size:10px;flex-shrink:0;}
  .sf-brand-name{font-family:var(--ff-head);font-weight:800;font-size:12px;color:var(--ink);letter-spacing:.5px;}
  .sf-links{display:flex;flex-wrap:wrap;gap:6px 14px;}
  .sf-links a{font-family:var(--ff-mono);font-size:9.5px;letter-spacing:.5px;color:var(--text-dim);text-decoration:none;}
  .sf-links a:hover{color:var(--caution);}
  .sf-bottom{text-align:center;font-family:var(--ff-mono);font-size:9px;color:var(--text-muted);letter-spacing:1px;opacity:.85;padding-top:2px;line-height:1.7;}
  .sf-bottom b{color:var(--caution);font-weight:600;}
  @media(max-width:440px){.sf-top{flex-direction:column;align-items:flex-start;}}

  @keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
  .shake{animation:shake 0.5s ease;}

  @media(max-width:480px){ .card-hd{padding:24px 20px 20px;} .card-bd{padding:22px 20px 26px;} .stat-strip{display:none;} }