/* ============================================================
   soc-tools — seitenspezifische Stile

   Aus page-soc-tools.php herausgeloest (Befund ARC-01).
   Wird in functions.php nur auf dieser Seite geladen.

   Farbwerte sind bewusst unveraendert uebernommen. Zur
   Token-Migration siehe den Hinweis in pages/dashboard.css:
   sie ist nicht mechanisch moeglich, solange zwei Token-Saetze
   uebereinanderliegen.
   ============================================================ */

    /* ===== SOC Tools — scoped layout ===== */
    .tools-page { max-width:1320px; margin:0 auto; padding:var(--ht-space-6) var(--ht-space-6) var(--ht-space-10); box-sizing:border-box; }
    .tools-page *, .tools-page *::before, .tools-page *::after { box-sizing:border-box; }
    .tools-page .card { background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%); border:1px solid rgba(45,108,246,.14); border-radius:12px; padding:var(--ht-pad-card); box-shadow:0 18px 45px rgba(0,0,0,.24); }
    .tools-page .tlink { color:var(--ht-primary-text); font-weight:var(--ht-font-weight-semibold); text-decoration:none; font-size:var(--ht-type-body-sm); display:inline-flex; align-items:center; gap:var(--ht-space-1); }
    .tools-page .tlink:hover { text-decoration:underline; }

    .tools-hero { display:grid; grid-template-columns:1.1fr 1fr; gap:var(--ht-space-6); align-items:stretch; margin-bottom:var(--ht-space-5); }
    .tools-hero-copy { display:flex; flex-direction:column; }
    .tools-badge { align-self:flex-start; display:inline-flex; align-items:center; color:var(--ht-primary-text); background:rgba(45,108,246,.12); border:1px solid rgba(45,108,246,.35); border-radius:6px; padding:var(--ht-space-1) var(--ht-space-25); font-size:var(--ht-type-caption); font-weight:var(--ht-font-weight-heavy); letter-spacing:.04em; text-transform:uppercase; margin-bottom:var(--ht-space-4); }
    .tools-hero-copy h1 { font-size:clamp(34px,3.6vw,46px); line-height:var(--ht-leading-tight); margin:0 0 var(--ht-space-35); color:#0F1B2D; font-weight:var(--ht-font-weight-heavy); letter-spacing:-.02em; }
    .tools-hero-copy h1 .ac { color:var(--ht-primary-text); }
    .tools-hero-copy .lead { color:#566276; line-height:var(--ht-leading-relaxed); font-size:var(--ht-type-body-lg); max-width:520px; margin:0 0 var(--ht-space-5); }
    .tools-hero-btns { display:flex; gap:var(--ht-space-3); flex-wrap:wrap; margin-bottom:var(--ht-space-45); }
    .tools-page .t-btn { height:44px; padding:0 var(--ht-space-45); border-radius:9px; font-size:var(--ht-type-body); font-weight:var(--ht-font-weight-bold); cursor:pointer; display:inline-flex; align-items:center; gap:var(--ht-space-2); border:none; }
    .tools-page .t-btn.primary { background:var(--ht-primary); color:#F4F7FB; }
    .tools-page .t-btn.ghost { background:rgba(16,30,54,.04); color:#0F1B2D; border:1px solid rgba(16,30,54,.12); }
    .tools-trust { display:flex; gap:var(--ht-space-5); flex-wrap:wrap; font-size:var(--ht-type-body-sm); color:#566276; margin-top:auto; }
    .tools-trust span { display:inline-flex; align-items:center; gap:var(--ht-space-15); }
    .tools-trust i { color:var(--ht-primary-text); }

    .tools-kpi-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--ht-gap-grid); margin-bottom:var(--ht-space-35); }
    .tools-kpi-card { background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%); border:1px solid rgba(45,108,246,.14); border-radius:12px; padding:var(--ht-pad-card-dense) var(--ht-pad-card); }
    .tools-kpi-card .ic { width:34px; height:34px; border-radius:8px; background:rgba(45,108,246,.1); color:var(--ht-primary-text); display:flex; align-items:center; justify-content:center; margin-bottom:var(--ht-space-3); }
    .tools-kpi-card .val { font-size:var(--ht-type-metric); font-weight:var(--ht-font-weight-heavy); color:var(--ht-text-primary); line-height:var(--ht-leading-tight); }
    .tools-kpi-card .lbl { font-size:var(--ht-type-caption); color:var(--ht-text-secondary); margin-top:var(--ht-space-1); }
    .tools-map-panel { height:220px; border-radius:12px; overflow:hidden; background:radial-gradient(circle at 50% 50%, rgba(45,108,246,.05), transparent 70%), linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%); border:1px solid rgba(45,108,246,.14); position:relative; display:flex; align-items:center; justify-content:center; }
    .tools-map-panel .world { width:90%; height:78%; opacity:.9; background-image:radial-gradient(rgba(45,108,246,.28) 1px, transparent 1.4px); background-size:11px 11px; -webkit-mask:radial-gradient(ellipse 60% 60% at 50% 45%, #000 55%, transparent 100%); mask:radial-gradient(ellipse 60% 60% at 50% 45%, #000 55%, transparent 100%); }
    .tools-map-panel .node { position:absolute; width:7px; height:7px; border-radius:50%; background:var(--ht-primary); box-shadow:0 0 10px var(--ht-primary); }

    .tools-controls { display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:var(--ht-space-45); align-items:center; margin-bottom:var(--ht-space-45); }
    .tools-tabs { display:flex; flex-wrap:wrap; gap:var(--ht-space-25); }
    .tool-tab { height:38px; padding:0 var(--ht-space-35); border-radius:8px; border:1px solid rgba(16,30,54,.08); background:#FFFFFF; color:#566276; font-weight:var(--ht-font-weight-semibold); font-size:var(--ht-type-body-sm); display:inline-flex; align-items:center; gap:var(--ht-space-15); cursor:pointer; }
    .tool-tab.active { background:var(--ht-primary); color:#FFFFFF; border-color:var(--ht-primary); box-shadow:0 0 22px rgba(45,108,246,.2); }
    .tools-search-wrap { position:relative; }
    .tools-search-wrap i { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:var(--ht-text-muted); }
    .tools-search { height:40px; background:#FFFFFF; border:1px solid rgba(16,30,54,.10); border-radius:8px; color:#0F1B2D; padding:0 var(--ht-space-35) 0 var(--ht-space-10); width:100%; font-size:var(--ht-type-body-sm); }

    .tools-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--ht-gap-grid); margin-bottom:var(--ht-space-5); }
    .tool-card { display:flex; flex-direction:column; transition:transform .18s ease, border-color .18s ease; }
    .tool-card:hover { transform:translateY(-2px); border-color:rgba(45,108,246,.34); }
    .tool-card .tool-icon { width:44px; height:44px; border-radius:11px; background:rgba(45,108,246,.1); color:var(--ht-primary-text); display:flex; align-items:center; justify-content:center; font-size:var(--ht-icon-xl); margin-bottom:var(--ht-space-3); }
    .tool-card h3 { font-size:var(--ht-type-title); margin:0 0 var(--ht-space-15); color:#0F1B2D; font-weight:var(--ht-font-weight-bold); }
    .tool-card .tdesc { font-size:var(--ht-type-body-sm); color:#566276; line-height:var(--ht-leading-normal); margin:0 0 var(--ht-space-3); }
    .tool-card ul { list-style:none; margin:0 0 var(--ht-space-35); padding:0; display:flex; flex-direction:column; gap:var(--ht-space-15); }
    .tool-card li { font-size:var(--ht-type-body-sm); color:#566276; display:flex; align-items:center; gap:var(--ht-space-2); }
    .tool-card li i { color:var(--ht-primary-text); font-size:var(--ht-icon-sm); flex:0 0 auto; }
    .tool-open-btn { margin-top:auto; height:38px; border-radius:8px; background:rgba(45,108,246,.1); border:1px solid rgba(45,108,246,.28); color:var(--ht-primary-text); font-weight:var(--ht-font-weight-bold); font-size:var(--ht-type-body-sm); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:var(--ht-space-15); transition:background .18s; }
    .tool-open-btn:hover { background:rgba(45,108,246,.18); }

    .tools-trustbar { display:grid; grid-template-columns:auto 1fr; gap:var(--ht-space-6); align-items:center; margin-bottom:var(--ht-space-5); padding:var(--ht-space-5) var(--ht-space-6); }
    .tools-trustbar .tb-left { display:flex; align-items:center; gap:var(--ht-space-4); }
    .tools-trustbar .tb-ic { width:48px; height:48px; border-radius:12px; background:rgba(45,108,246,.1); color:var(--ht-primary-text); display:flex; align-items:center; justify-content:center; font-size:var(--ht-icon-xl); flex:0 0 auto; }
    .tools-trustbar h3 { margin:0 0 var(--ht-space-05); color:#0F1B2D; font-size:var(--ht-type-title); }
    .tools-trustbar p { margin:0; color:#566276; font-size:var(--ht-type-body-sm); }
    .tools-trustbar .tb-points { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--ht-space-35); font-size:var(--ht-type-caption); color:#566276; }
    .tools-trustbar .tb-points span { display:flex; align-items:center; gap:var(--ht-space-15); }
    .tools-trustbar .tb-points i { color:var(--ht-primary-text); flex:0 0 auto; }

    /* ===== Reusable Tool Modal ===== */
    .tool-modal-overlay { position:fixed; inset:0; background:rgba(2,8,17,.72); backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:var(--ht-space-6); z-index:9999; }
    .tool-modal-overlay[hidden] { display:none; }
    .tool-modal { width:min(920px,100%); max-height:min(88vh,980px); overflow:auto; background:linear-gradient(180deg,#FFFFFF 0%,#FFFFFF 100%); border:1px solid rgba(45,108,246,.22); border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.55); padding:var(--ht-space-55); color:#0F1B2D; position:relative; box-sizing:border-box; }
    .tool-modal *, .tool-modal *::before, .tool-modal *::after { box-sizing:border-box; }
    .tool-modal-close { position:absolute; top:16px; right:16px; width:36px; height:36px; border-radius:9px; background:rgba(16,30,54,.05); border:1px solid rgba(16,30,54,.1); color:#566276; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:var(--ht-icon-lg); }
    .tool-modal-close:hover { color:#0F1B2D; border-color:rgba(45,108,246,.4); }
    .tm-header { display:flex; align-items:flex-start; gap:var(--ht-space-4); margin-bottom:var(--ht-space-5); padding-right:44px; }
    .tm-header .tm-icon { width:52px; height:52px; border-radius:13px; background:rgba(45,108,246,.1); color:var(--ht-primary-text); display:flex; align-items:center; justify-content:center; font-size:var(--ht-icon-2xl); flex:0 0 auto; }
    .tm-header h2 { margin:0 0 var(--ht-space-1); font-size:var(--ht-type-section); color:#0F1B2D; }
    .tm-header p { margin:0; color:#566276; font-size:var(--ht-type-body-sm); line-height:var(--ht-leading-normal); }
    .tm-input-block { margin-bottom:var(--ht-space-2); }
    .tm-input-block label { display:block; font-size:var(--ht-type-caption); color:#566276; margin-bottom:var(--ht-space-15); font-weight:var(--ht-font-weight-semibold); }
    .tm-input-row { display:flex; gap:var(--ht-space-25); align-items:stretch; }
    .tm-input-row .tm-field { flex:1; min-width:0; }
    .tm-input-row input, .tm-input-row textarea { width:100%; background:#F4F7FB; border:1px solid rgba(16,30,54,.12); border-radius:9px; color:#0F1B2D; padding:var(--ht-space-25) var(--ht-space-35); font-size:var(--ht-type-body); font-family:inherit; }
    .tm-input-row textarea { min-height:90px; resize:vertical; font-family:'JetBrains Mono',monospace; font-size:var(--ht-type-body-sm); }
    .tm-run { background:var(--ht-primary); color:#F4F7FB; font-weight:var(--ht-font-weight-bold); border:none; border-radius:9px; padding:0 var(--ht-space-55); cursor:pointer; white-space:nowrap; font-size:var(--ht-type-body); align-self:flex-start; height:44px; }
    .tm-run[disabled] { opacity:.6; cursor:progress; }
    .tm-meta { font-size:var(--ht-type-caption); color:var(--ht-text-muted); margin:var(--ht-space-3) 0 var(--ht-space-45); line-height:var(--ht-leading-relaxed); }
    .tm-results { background:#F4F7FB; border:1px solid rgba(16,30,54,.07); border-radius:12px; padding:var(--ht-space-4); }
    .tm-res-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:var(--ht-space-25); }
    .tm-res-title { font-size:var(--ht-type-title); font-weight:var(--ht-font-weight-bold); color:#0F1B2D; }
    .tm-risk { font-size:var(--ht-type-caption); font-weight:var(--ht-font-weight-bold); padding:var(--ht-space-1) var(--ht-space-25); border-radius:7px; }
    .tm-res-row { display:flex; align-items:center; justify-content:space-between; gap:var(--ht-space-35); padding:var(--ht-space-25) 0; border-bottom:1px solid rgba(16,30,54,.05); font-size:var(--ht-type-body-sm); color:#566276; }
    .tm-res-row:last-of-type { border-bottom:none; }
    .tm-res-row b { color:#0F1B2D; font-weight:var(--ht-font-weight-bold); text-align:right; word-break:break-word; }
    .tm-res-empty { font-size:var(--ht-type-body-sm); color:#566276; padding:var(--ht-space-15) 0; }
    .tm-res-error { font-size:var(--ht-type-body-sm); color:#FF6B6B; padding:var(--ht-space-15) 0; display:flex; align-items:center; gap:var(--ht-space-2); }
    .tm-res-foot { font-size:var(--ht-type-caption); color:var(--ht-text-muted); margin-top:var(--ht-space-3); border-top:1px solid rgba(16,30,54,.05); padding-top:var(--ht-space-25); }
    .tm-actions { display:flex; gap:var(--ht-space-25); margin-top:var(--ht-space-45); flex-wrap:wrap; }
    .tm-actions button { height:40px; padding:0 var(--ht-space-4); border-radius:9px; background:rgba(16,30,54,.04); border:1px solid rgba(16,30,54,.12); color:#0F1B2D; font-weight:var(--ht-font-weight-semibold); font-size:var(--ht-type-body-sm); cursor:pointer; display:inline-flex; align-items:center; gap:var(--ht-space-15); }
    .tm-actions button:hover { border-color:rgba(45,108,246,.4); color:var(--ht-primary-text); }

    @media (max-width:1180px){
        .tools-hero { grid-template-columns:1fr; }
        .tools-controls { grid-template-columns:1fr; }
        .tools-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
        .tools-trustbar { grid-template-columns:1fr; }
        .tools-trustbar .tb-points { grid-template-columns:repeat(2,minmax(0,1fr)); }
    }
    @media (max-width:760px){
        .tools-grid { grid-template-columns:1fr; }
        .tools-trustbar .tb-points { grid-template-columns:1fr; }
        .tool-modal { width:100%; max-height:92vh; border-radius:14px; padding:var(--ht-space-4); }
        .tool-modal-overlay { padding:var(--ht-space-3); }
        .tm-input-row { flex-direction:column; }
        .tm-run { width:100%; align-self:stretch; }
    }