:root{
    --bg:#f3f5f9;
    --surface:#ffffff;
    --ink:#0e2440;
    --ink-soft:#5b6b82;
    --ink-faint:#8b99ac;
    --line:#e2e8f0;
    --primary:#2266e3;
    --primary-deep:#1a4fc0;
    --primary-glow:rgba(34,102,227,.16);
    --green:#16a05e; --green-bg:#e5f7ed; --green-line:#bfe8d0;
    --amber:#c98a06; --amber-bg:#fdf4e0; --amber-line:#f0ddb0;
    --red:#d64545;   --red-bg:#fcecec;   --red-line:#f2c8c8;
    --mono:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
    --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    --radius:12px;
    --shadow-sm:0 1px 2px rgba(14,36,64,.05);
    --shadow-md:0 1px 2px rgba(14,36,64,.05),0 8px 24px -6px rgba(14,36,64,.10);
    --shadow-lg:0 2px 4px rgba(14,36,64,.06),0 16px 40px -8px rgba(14,36,64,.16);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth}
  body{font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:1.55;
    -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  .wrap{max-width:1100px;margin:0 auto;padding:0 24px}
  ::selection{background:var(--primary-glow)}

  /* ---------- Header ---------- */
  header{background:rgba(255,255,255,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50}
  .nav{display:flex;align-items:center;gap:8px;height:60px}
  .logo{font-weight:800;font-size:18px;letter-spacing:-.02em;color:var(--ink);text-decoration:none;
    display:flex;align-items:center;gap:9px;margin-right:18px}
  .logo .dot{width:22px;height:22px;border-radius:7px;display:inline-flex;align-items:center;justify-content:center;
    background:linear-gradient(135deg,#3b82f6,#1a4fc0);box-shadow:0 2px 6px rgba(34,102,227,.35)}
  .logo .dot::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff;opacity:.95}
  nav{display:flex;gap:2px;margin-left:4px;flex:1}
  nav button{background:none;border:none;font:inherit;font-size:13.5px;font-weight:500;color:var(--ink-soft);
    padding:7px 13px;border-radius:8px;cursor:pointer;transition:all .15s}
  nav button:hover{background:#eef2f8;color:var(--ink)}
  nav button.active{color:var(--primary);font-weight:600;background:#e9f1fe}
  .signin{font-size:13.5px;color:var(--primary);text-decoration:none;font-weight:600;white-space:nowrap;
    padding:7px 15px;border-radius:8px;border:1px solid var(--line);background:var(--surface);transition:all .15s}
  .signin:hover{border-color:var(--primary);box-shadow:var(--shadow-sm)}

  /* ---------- Views ---------- */
  .view{display:none;padding:56px 0 84px}
  .view.active{display:block;animation:fadeUp .35s ease}
  @keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

  /* ---------- Check hero ---------- */
  .hero{max-width:780px;margin:0 auto;text-align:center;padding:32px 0 6px;position:relative}
  .hero-badge{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:var(--primary);
    background:#e9f1fe;border:1px solid #d3e3fb;padding:5px 14px;border-radius:999px;margin-bottom:20px}
  .hero-badge .pulse{width:7px;height:7px;border-radius:50%;background:var(--primary);animation:pulse 2s infinite}
  @keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.8)}}
  .hero h1{font-size:40px;letter-spacing:-.035em;line-height:1.12;font-weight:800}
  .hero h1 .grad{background:linear-gradient(120deg,#2266e3,#6a5ae0);-webkit-background-clip:text;background-clip:text;color:transparent}
  .hero p{color:var(--ink-soft);margin:14px auto 30px;font-size:16.5px;max-width:520px}

  .lookup{display:flex;gap:10px;position:relative}
  .lookup .icon{position:absolute;left:16px;top:50%;transform:translateY(-50%);color:var(--ink-faint);pointer-events:none}
  .lookup input{flex:1;min-width:0;height:56px;padding:0 16px 0 44px;font-size:16px;font-family:var(--mono);
    border:1.5px solid var(--line);border-radius:14px;background:var(--surface);color:var(--ink);outline:none;
    box-shadow:var(--shadow-sm);transition:border-color .15s,box-shadow .15s}
  .lookup input::placeholder{color:var(--ink-faint)}
  .lookup input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow)}
  .lookup input.input-error{border-color:var(--red);box-shadow:0 0 0 4px rgba(214,69,69,.12)}
  .btn{height:56px;padding:0 26px;font-size:15px;font-weight:600;border:none;border-radius:14px;
    cursor:pointer;font-family:var(--sans);white-space:nowrap;transition:all .18s;display:inline-flex;align-items:center;justify-content:center;gap:8px}
  .btn-primary{background:linear-gradient(180deg,#2f73ee,#1d5bd8);color:#fff;
    box-shadow:0 1px 2px rgba(20,60,150,.3),0 6px 16px -4px rgba(34,102,227,.45)}
  .btn-primary:hover{transform:translateY(-1px);box-shadow:0 2px 3px rgba(20,60,150,.3),0 10px 22px -4px rgba(34,102,227,.5);background:linear-gradient(180deg,#3a7ef5,#2261e0)}
  .btn-primary:active{transform:translateY(0)}
  .btn-primary:disabled{opacity:.7;cursor:wait;transform:none}
  .btn-ghost{background:var(--surface);color:var(--ink);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
  .btn-ghost:hover{border-color:#c3cedd;background:#f9fbfd;transform:translateY(-1px)}
  .btn-sm{height:38px;padding:0 15px;font-size:13.5px;border-radius:10px}
  .hint{margin-top:14px;font-size:13.5px;color:var(--ink-faint);display:flex;align-items:center;justify-content:center;gap:6px}
  .hint svg{color:var(--green)}

  .demo-strip{margin:22px auto 0;font-size:13px;color:var(--ink-faint)}
  .demo-strip a{color:var(--primary);cursor:pointer;text-decoration:none;font-family:var(--mono);font-size:12.5px;
    padding:2px 8px;border-radius:6px;transition:background .12s}
  .demo-strip a:hover{background:#e9f1fe;text-decoration:none}

  /* ---------- Result card ---------- */
  .card{background:var(--surface);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-md);
    max-width:780px;margin:34px auto 0;padding:30px 34px;position:relative;overflow:hidden;animation:fadeUp .3s ease}
  .card::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--line)}
  .card.acc-green::before{background:linear-gradient(180deg,#2bbd7e,#16a05e)}
  .card.acc-amber::before{background:linear-gradient(180deg,#e8b23a,#c98a06)}
  .card.acc-red::before{background:linear-gradient(180deg,#e46565,#d64545)}
  .card.acc-gray::before{background:#c6d0dd}
  .card[hidden]{display:none}
  .card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap}
  .domain-name{font-family:var(--mono);font-size:19px;font-weight:700;word-break:break-all}
  .status-pill{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
    padding:5px 13px;border-radius:999px;white-space:nowrap;border:1px solid transparent}
  .st-green{color:var(--green);background:var(--green-bg);border-color:var(--green-line)}
  .st-amber{color:var(--amber);background:var(--amber-bg);border-color:var(--amber-line)}
  .st-red{color:var(--red);background:var(--red-bg);border-color:var(--red-line)}
  .st-gray{color:var(--ink-soft);background:#eef2f7;border-color:#dde4ed}

  .big-answer{margin:20px 0 8px}
  .big-answer .days{font-size:56px;font-weight:800;letter-spacing:-.045em;line-height:1.02;font-variant-numeric:tabular-nums}
  .big-answer .days small{font-size:26px;font-weight:700;letter-spacing:-.02em;color:var(--ink-soft)}
  .big-answer .expiry{font-size:16.5px;color:var(--ink-soft);margin-top:6px}
  .big-answer .expiry strong{color:var(--ink);font-weight:700;font-family:var(--mono);font-size:15.5px}

  .meta{margin-top:18px;padding-top:16px;border-top:1px solid var(--line);font-size:13.5px;color:var(--ink-soft);
    display:flex;flex-direction:column;gap:5px}
  .meta b{color:var(--ink);font-weight:600}
  .actions{display:flex;gap:10px;margin-top:22px;flex-wrap:wrap;align-items:center}
  .details-link{font-size:13.5px;color:var(--primary);background:none;border:none;cursor:pointer;font-family:var(--sans);font-weight:600;padding:6px 4px}
  .details-link:hover{text-decoration:underline}
  .record-details{margin-top:14px;padding:16px 18px;background:#f6f8fb;border:1px solid var(--line);border-radius:12px;
    font-family:var(--mono);font-size:12.5px;color:var(--ink-soft);white-space:pre-wrap;word-break:break-all;display:none;line-height:1.6}
  .record-details.open{display:block;animation:fadeUp .2s ease}

  /* conflict */
  .conflict-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
  .source-box{border:1.5px solid var(--line);border-radius:12px;padding:16px 18px;background:#fbfcfe;transition:border-color .15s}
  .source-box .src-label{font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint)}
  .source-box .src-date{font-family:var(--mono);font-size:18px;font-weight:700;margin-top:7px}
  .source-box .src-sub{font-size:12.5px;color:var(--ink-soft);margin-top:2px}
  .source-box.conflict-flag{border-color:var(--amber-line);background:var(--amber-bg)}
  .verify-note{margin-top:16px;display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:var(--amber);
    background:var(--amber-bg);border:1px solid var(--amber-line);border-radius:12px;padding:12px 16px}
  .verify-note svg{flex:none;margin-top:1px}

  /* loading */
  .spinner{width:20px;height:20px;border:2.5px solid rgba(255,255,255,.4);border-top-color:#fff;border-radius:50%;
    animation:spin .7s linear infinite;display:inline-block}
  @keyframes spin{to{transform:rotate(360deg)}}
  .skeleton{height:14px;border-radius:7px;background:linear-gradient(90deg,#edf1f6 25%,#f7fafc 50%,#edf1f6 75%);
    background-size:200% 100%;animation:shimmer 1.3s infinite;margin-top:12px}
  @keyframes shimmer{to{background-position:-200% 0}}
  .sk-1{width:40%}.sk-2{width:65%;height:48px}.sk-3{width:55%}.sk-4{width:80%}

  /* notices */
  .notice{display:flex;gap:14px;align-items:flex-start}
  .notice .txt b{display:block;font-size:16px;margin-bottom:4px;letter-spacing:-.01em}
  .notice .txt span{font-size:14px;color:var(--ink-soft)}
  .icon-bubble{flex:none;width:42px;height:42px;border-radius:12px;display:flex;align-items:center;justify-content:center}
  .ib-red{background:var(--red-bg);color:var(--red);border:1px solid var(--red-line)}
  .ib-gray{background:#eef2f7;color:var(--ink-soft);border:1px solid var(--line)}
  .field-error{margin:10px auto 0;font-size:13px;color:var(--red);display:none;text-align:left;max-width:780px}

  /* ---------- Below the fold ---------- */
  .below{max-width:780px;margin:60px auto 0}
  .below h2{font-size:19px;letter-spacing:-.02em;margin-bottom:16px;display:flex;align-items:center;gap:10px}
  .below h2::after{content:"";flex:1;height:1px;background:var(--line)}
  .source-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .source-cards .sc{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;
    font-size:13.5px;color:var(--ink-soft);box-shadow:var(--shadow-sm);transition:all .18s}
  .source-cards .sc:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
  .source-cards .sc .sc-icon{width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
    margin-bottom:12px;background:#e9f1fe;color:var(--primary)}
  .source-cards .sc b{display:block;color:var(--ink);font-size:14.5px;margin-bottom:5px}
  .faq{margin-top:40px}
  .faq details{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:15px 20px;margin-bottom:10px;
    font-size:14px;color:var(--ink-soft);box-shadow:var(--shadow-sm);transition:border-color .15s}
  .faq details:hover{border-color:#c9d4e2}
  .faq summary{cursor:pointer;font-weight:600;color:var(--ink);font-size:14.5px;list-style:none;display:flex;justify-content:space-between;align-items:center}
  .faq summary::after{content:"+";font-size:19px;color:var(--ink-faint);font-weight:400;transition:transform .2s}
  .faq details[open] summary::after{transform:rotate(45deg)}
  .faq details p{margin-top:9px}

  /* ---------- Monitor ---------- */
  .page-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
  .page-head h1{font-size:26px;letter-spacing:-.025em}
  .page-head p{color:var(--ink-soft);font-size:14px;margin-top:5px}
  .filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
  .filters button{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:7px 8px 7px 16px;
    font:inherit;font-size:13.5px;color:var(--ink-soft);cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .15s}
  .filters button:hover{border-color:#c3cedd}
  .filters button.active{background:var(--ink);border-color:var(--ink);color:#fff;font-weight:600}
  .filters .count{font-size:11.5px;font-weight:700;background:#eef2f7;color:var(--ink-soft);border-radius:999px;padding:2px 8px}
  .filters button.active .count{background:rgba(255,255,255,.18);color:#fff}

  .table-shell{background:var(--surface);border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:var(--shadow-md)}
  table{width:100%;border-collapse:collapse}
  th{font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--ink-faint);text-align:left;
    padding:13px 18px;background:#f8fafc;border-bottom:1px solid var(--line);font-weight:700}
  td{padding:15px 18px;border-bottom:1px solid var(--line);font-size:14px;vertical-align:middle}
  tbody tr{transition:background .12s}
  tbody tr:hover{background:#f8fafbd9}
  tbody tr:last-child td{border-bottom:none}
  td .mono{font-family:var(--mono);font-weight:600;font-size:13.5px}
  td .date{font-family:var(--mono);font-size:13px;color:var(--ink-soft)}
  .owner{display:inline-flex;align-items:center;gap:9px;font-size:13.5px;font-weight:500}
  .avatar{width:28px;height:28px;border-radius:50%;color:#fff;font-size:11px;font-weight:700;
    display:inline-flex;align-items:center;justify-content:center;flex:none;box-shadow:inset 0 -2px 4px rgba(0,0,0,.12)}
  .unassigned{color:var(--ink-faint);font-size:13px}
  .rem{font-size:12.5px;font-weight:600;white-space:nowrap}
  .rem.on{color:var(--green)} .rem.off{color:var(--ink-faint)}
  .row-actions{display:flex;gap:6px;flex-wrap:wrap}
  .row-actions button{font:inherit;font-size:12.5px;font-weight:500;padding:6px 11px;border-radius:8px;border:1px solid var(--line);
    background:var(--surface);color:var(--ink-soft);cursor:pointer;transition:all .13s}
  .row-actions button:hover{border-color:var(--primary);color:var(--primary);background:#f4f8ff}
  .row-actions button.done{opacity:.5;pointer-events:none;border-color:var(--green-line);color:var(--green);background:var(--green-bg)}
  .status-dot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:8px;vertical-align:1px}

  .domain-cards{display:none}

  footer{border-top:1px solid var(--line);margin-top:24px;padding:28px 0;color:var(--ink-faint);font-size:13px;text-align:center}

  /* ---------- Responsive ---------- */
  @media (max-width:720px){
    .wrap{padding:0 16px}
    .nav{gap:8px;height:56px}
    .logo{margin-right:6px;font-size:16.5px}
    nav{overflow-x:auto;scrollbar-width:none}
    nav::-webkit-scrollbar{display:none}
    nav button{padding:7px 10px;font-size:13px}
    .view{padding:36px 0 60px}
    .hero{padding:12px 0 4px}
    .hero h1{font-size:28px}
    .hero p{font-size:15px}
    .lookup{flex-direction:column}
    .lookup .icon{top:28px}
    .lookup input,.lookup .btn{width:100%;height:54px;flex:0 0 54px}
    .card{padding:22px 20px;border-radius:16px}
    .big-answer .days{font-size:42px}
    .big-answer .days small{font-size:20px}
    .conflict-grid{grid-template-columns:1fr}
    .source-cards{grid-template-columns:1fr}
    .actions .btn{flex:1}
    .table-shell{display:none}
    .domain-cards{display:flex;flex-direction:column;gap:12px}
    .d-card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:var(--shadow-sm)}
    .d-card .top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
    .d-card .rows{display:flex;flex-direction:column;gap:8px;font-size:13.5px;color:var(--ink-soft)}
    .d-card .rows b{color:var(--ink);font-weight:600}
    .d-card .row-actions{margin-top:14px}
  }

  [hidden]{display:none!important}
  .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
  .nav-note{font-size:12.5px;font-weight:650;color:var(--primary);border:1px solid #d3e3fb;background:#e9f1fe;padding:7px 12px;border-radius:999px;white-space:nowrap}
  .field-error:not([hidden]){display:block}
  .demo-strip button{font:inherit;font-family:var(--mono);font-size:12.5px;color:var(--primary);background:none;border:0;border-radius:6px;padding:3px 8px;cursor:pointer}
  .demo-strip button:hover,.demo-strip button:focus-visible{background:#e9f1fe}
  .sc-icon{font-family:var(--mono);font-size:19px;font-weight:700}
  .result-notice{margin-top:24px}
  .result-caveat{margin-top:18px;padding:10px 13px;background:#f5f7fb;border:1px solid var(--line);border-radius:9px;color:var(--ink-soft);font-size:13px}
  .record-details:not([hidden]){display:grid;gap:5px;margin-top:18px}
  .record-details a,.meta a,.guide-copy a,.bulk-row a,.monitor-table a{color:var(--primary)}
  .input-label,.watch-add-form label{display:block;font-size:13px;font-weight:700;color:var(--ink);margin-bottom:8px}
  .bulk-card{max-width:none;margin:0}
  .bulk-card textarea,.watch-add-form input{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:11px;font-family:var(--mono);font-size:14px;color:var(--ink);background:#fff;outline:none}
  .bulk-card textarea:focus,.watch-add-form input:focus{border-color:var(--primary);box-shadow:0 0 0 4px var(--primary-glow)}
  .field-help{font-size:12.5px;color:var(--ink-soft);margin-top:9px}
  .bulk-results{display:grid;gap:12px;margin-top:20px}
  .bulk-row{padding:18px 22px;border:1px solid var(--line);border-radius:13px;background:var(--surface);box-shadow:var(--shadow-sm)}
  .bulk-row>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .bulk-row strong{font-family:var(--mono);font-size:14px}
  .bulk-row p{font-size:14px;color:var(--ink);margin-top:8px}
  .bulk-row small{display:block;color:var(--ink-soft);margin-top:6px}
  .text-action{border:0;background:none;color:var(--primary);font-weight:650;font-size:13px;cursor:pointer;margin-top:10px;padding:0}
  .text-action:hover{text-decoration:underline}
  .watch-add-form{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:18px;box-shadow:var(--shadow-sm)}
  .watch-add-form>div{display:flex;gap:10px}
  .watch-add-form input{max-width:420px}
  .watch-add-form .field-error{margin:10px 0 0}
  .empty-table{text-align:center;color:var(--ink-soft);padding:32px}
  .watchlist-note{margin-top:16px}
  .guide-copy{max-width:760px;padding:30px 34px;border:1px solid var(--line);border-radius:16px;background:var(--surface);box-shadow:var(--shadow-sm)}
  .guide-copy h2{font-size:20px;letter-spacing:-.02em;margin-top:25px;margin-bottom:8px}
  .guide-copy h2:first-child{margin-top:0}
  .guide-copy p{font-size:15px;color:var(--ink-soft);line-height:1.7}
  .guide-copy .guide-source{font-size:13px;margin-top:20px}
  .guide-copy .btn{margin-top:20px}
  .legal-page{margin:48px auto 64px}
  .legal-page h1{font-size:32px;letter-spacing:-.03em;margin-bottom:10px}
  .legal-page p+ h2{margin-top:24px}
  .footer-inner{display:flex;justify-content:space-between;gap:18px;align-items:center;text-align:left}
  .footer-inner>span:last-child{display:flex;gap:18px}
  footer a{color:var(--ink-soft);text-decoration:none}
  footer a:hover{text-decoration:underline;color:var(--primary)}
  button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
  @media (max-width:720px){
    .nav-note{display:none}
    .nav{overflow:hidden}
    nav{min-width:0}
    .bulk-card{padding:20px}
    .watch-add-form>div{flex-direction:column}
    .watch-add-form input{max-width:none}
    .guide-copy{padding:23px 20px}
    .footer-inner{flex-direction:column;align-items:flex-start}
  }
  @media (max-width:420px){
    .nav{height:auto;flex-wrap:wrap;padding-top:9px;padding-bottom:8px;gap:4px}
    .logo{width:100%;margin:0 0 2px}
    nav{flex:0 0 100%;margin-left:0;overflow:visible;justify-content:space-between}
    nav button{padding:6px 11px}
    .legal-page{margin:30px auto 50px}
  }