:root{
    --primary:#4F46E5;
    --primary-dark:#3730A3;
    --primary-light:#EEF2FF;
    --accent:#06B6D4;
    --bg:#F8FAFC;
    --surface:#FFFFFF;
    --border:#E2E8F0;
    --border-strong:#CBD5E1;
    --text:#0F172A;
    --text-sub:#475569;
    --text-mute:#94A3B8;
    --success:#10B981;
    --success-bg:#ECFDF5;
    --warn:#F59E0B;
    --warn-bg:#FFFBEB;
    --danger:#EF4444;
    --danger-bg:#FEF2F2;
    --info:#3B82F6;
    --info-bg:#EFF6FF;
    --shadow:0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
    --shadow-md:0 4px 6px -1px rgba(15,23,42,.08), 0 2px 4px -2px rgba(15,23,42,.04);
  }
  *{box-sizing:border-box;margin:0;padding:0}
  html,body{background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI","Meiryo",sans-serif;font-size:13px;line-height:1.6;-webkit-font-smoothing:antialiased}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  a{color:inherit;text-decoration:none}

  /* ====== Top Bar ====== */
  .topbar{position:sticky;top:0;z-index:100;background:#fff;border-bottom:1px solid var(--border);height:56px;display:flex;align-items:center;padding:0 24px;gap:24px}
  .logo{display:flex;align-items:center;gap:10px;font-weight:700;font-size:15px;color:var(--text)}
  .logo-mark{width:30px;height:30px;background:linear-gradient(135deg,var(--primary),var(--accent));border-radius:8px;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:14px}
  .topbar-search{flex:1;max-width:480px;position:relative}
  .topbar-search input{width:100%;height:36px;padding:0 12px 0 36px;border:1px solid var(--border);border-radius:8px;background:#F1F5F9;font-size:13px;outline:none}
  .topbar-search input:focus{background:#fff;border-color:var(--primary)}
  .topbar-search::before{content:"🔍";position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.6}
  .topbar-right{display:flex;align-items:center;gap:8px;margin-left:auto}
  .icon-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:8px;color:var(--text-sub);position:relative}
  .icon-btn:hover{background:#F1F5F9}
  .icon-btn .badge{position:absolute;top:6px;right:6px;width:7px;height:7px;background:var(--danger);border-radius:50%;border:2px solid #fff}
  .user-chip{display:flex;align-items:center;gap:8px;padding:4px 10px 4px 4px;border-radius:999px;border:1px solid var(--border);background:#fff}
  .user-chip:hover{background:#F8FAFC}
  .avatar{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,#6366F1,#06B6D4);display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:11px;flex-shrink:0}

  /* ====== Layout ====== */
  .layout{display:flex;min-height:calc(100vh - 56px)}
  .sidebar{width:220px;background:#fff;border-right:1px solid var(--border);padding:16px 12px;flex-shrink:0;position:sticky;top:56px;height:calc(100vh - 56px);overflow-y:auto}
  .nav-section{margin-bottom:18px}
  .nav-section-title{font-size:11px;color:var(--text-mute);font-weight:700;letter-spacing:.05em;padding:0 10px 6px;text-transform:uppercase}
  .nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;color:var(--text-sub);font-size:13px;font-weight:500;margin-bottom:1px;cursor:pointer}
  .nav-item:hover{background:#F1F5F9;color:var(--text)}
  .nav-item.active{background:var(--primary-light);color:var(--primary);font-weight:600}
  .nav-item .nav-ic{width:16px;text-align:center;font-size:13px}
  .nav-item .nav-count{margin-left:auto;font-size:11px;color:var(--text-mute);background:#F1F5F9;padding:1px 7px;border-radius:10px}
  .nav-item.active .nav-count{background:#fff;color:var(--primary)}
  a.nav-item{display:flex;text-decoration:none}

  .main{flex:1;min-width:0}

  /* ====== Screen tabs (WF切替) ====== */
  .wf-tabs{background:#0F172A;color:#fff;padding:10px 24px;display:flex;align-items:center;gap:6px;border-bottom:1px solid #1E293B;flex-wrap:wrap}
  .wf-tabs-label{font-size:11px;color:#94A3B8;margin-right:6px;letter-spacing:.05em}
  .wf-tab{padding:6px 12px;border-radius:6px;font-size:12px;color:#CBD5E1;font-weight:500;cursor:pointer;border:1px solid transparent}
  .wf-tab:hover{background:#1E293B}
  .wf-tab.active{background:#4F46E5;color:#fff;font-weight:600}
  .wf-tab small{opacity:.7;margin-right:6px;font-weight:600}

  /* ====== Page ====== */
  .page{display:none;padding:24px 28px 60px}
  .page.active{display:block}
  .page-header{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}
  .page-title{font-size:20px;font-weight:700;color:var(--text);display:flex;align-items:center;gap:10px}
  .page-id-chip{display:inline-block;background:#0F172A;color:#fff;font-size:10px;font-weight:700;padding:3px 7px;border-radius:4px;font-family:"SF Mono",Consolas,monospace}
  .page-subtitle{color:var(--text-sub);font-size:13px;margin-top:4px}
  .breadcrumb{font-size:12px;color:var(--text-mute);margin-bottom:8px}
  .breadcrumb .sep{margin:0 6px;opacity:.5}

  /* ====== Buttons ====== */
  .btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:8px;font-size:13px;font-weight:600;border:1px solid transparent;transition:all .15s;white-space:nowrap}
  .btn-primary{background:var(--primary);color:#fff}
  .btn-primary:hover{background:var(--primary-dark)}
  .btn-secondary{background:#fff;color:var(--text);border-color:var(--border-strong)}
  .btn-secondary:hover{background:#F8FAFC}
  .btn-ghost{background:transparent;color:var(--text-sub)}
  .btn-ghost:hover{background:#F1F5F9;color:var(--text)}
  .btn-sm{padding:5px 10px;font-size:12px}
  .btn-lg{padding:11px 22px;font-size:14px}
  .btn-group{display:inline-flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:#fff}
  .btn-group button{padding:6px 12px;font-size:12px;color:var(--text-sub);border-right:1px solid var(--border)}
  .btn-group button:last-child{border-right:none}
  .btn-group button.active{background:var(--primary);color:#fff;font-weight:600}

  /* ====== Card ====== */
  .card{background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow)}
  .card-body{padding:18px}
  .card-header{padding:14px 18px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px}
  .card-title{font-size:14px;font-weight:700;color:var(--text)}

  /* ====== KPI ====== */
  .kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
  .kpi{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;box-shadow:var(--shadow)}
  .kpi-label{font-size:11px;color:var(--text-mute);font-weight:600;letter-spacing:.03em;margin-bottom:6px}
  .kpi-val{font-size:24px;font-weight:700;color:var(--text);display:flex;align-items:baseline;gap:6px}
  .kpi-val small{font-size:12px;color:var(--text-sub);font-weight:500}
  .kpi-trend{font-size:11px;font-weight:600;margin-top:4px;display:flex;align-items:center;gap:4px}
  .kpi-trend.up{color:var(--success)}
  .kpi-trend.down{color:var(--danger)}

  /* ====== Filters ====== */
  .filter-bar{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px;margin-bottom:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .filter-group{display:flex;align-items:center;gap:6px}
  .filter-label{font-size:11px;color:var(--text-mute);font-weight:600}
  .select{height:32px;padding:0 28px 0 10px;border:1px solid var(--border-strong);border-radius:6px;background:#fff url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") right 10px center no-repeat;font-size:12px;color:var(--text);min-width:110px;-webkit-appearance:none;appearance:none}
  .search-input{height:32px;padding:0 10px;border:1px solid var(--border-strong);border-radius:6px;background:#fff;font-size:12px;min-width:200px}
  .search-input:focus,.select:focus{outline:none;border-color:var(--primary)}
  .filter-chip{display:inline-flex;align-items:center;gap:5px;background:var(--primary-light);color:var(--primary);padding:3px 8px;border-radius:999px;font-size:11px;font-weight:600}
  .filter-chip .x{cursor:pointer;opacity:.6}
  .filter-chip .x:hover{opacity:1}

  /* ====== Table ====== */
  .data-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;font-size:12.5px}
  .data-table thead th{background:#F8FAFC;color:var(--text-sub);font-weight:600;font-size:11px;text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);text-transform:uppercase;letter-spacing:.03em;white-space:nowrap;position:sticky;top:0}
  .data-table tbody td{padding:12px;border-bottom:1px solid var(--border);vertical-align:middle}
  .data-table tbody tr:hover{background:#F8FAFC;cursor:pointer}
  .data-table tbody tr:last-child td{border-bottom:none}
  .col-initial{font-weight:700;color:var(--primary);font-size:13px;font-family:"SF Mono",Consolas,monospace}
  .initial-badge{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:8px;background:linear-gradient(135deg,#6366F1,#06B6D4);color:#fff;font-weight:700;font-size:12px;font-family:"SF Mono",Consolas,monospace;letter-spacing:.02em}

  /* ====== Status / Tags ====== */
  .status-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:999px;font-size:11px;font-weight:600;white-space:nowrap}
  .status-active{background:var(--info-bg);color:var(--info)}
  .status-active::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--info)}
  .status-wait{background:var(--success-bg);color:var(--success)}
  .status-wait::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--success)}
  .status-soon{background:var(--warn-bg);color:var(--warn)}
  .status-soon::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--warn)}
  .skill-tag{display:inline-block;padding:2px 7px;background:#F1F5F9;color:var(--text-sub);border-radius:4px;font-size:11px;font-weight:500;margin:1px 2px 1px 0}
  .skill-tag.primary{background:var(--primary-light);color:var(--primary);font-weight:600}
  .skill-tag.ai{background:#FEF3C7;color:#92400E;font-weight:600}

  /* ====== Skill mark ◎○△- ====== */
  .skill-mark{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;font-weight:700;font-size:13px;font-family:"SF Mono",Consolas,monospace}
  .mark-double{background:#DBEAFE;color:#1D4ED8}/* ◎ */
  .mark-single{background:#E0E7FF;color:#4F46E5}/* ○ */
  .mark-tri{background:#FEF3C7;color:#92400E}/* △ */
  .mark-none{background:#F1F5F9;color:var(--text-mute)}/* - */
  .yr-badge{display:inline-block;background:#0F172A;color:#fff;font-size:10px;font-weight:700;padding:1px 6px;border-radius:10px;margin-left:5px;letter-spacing:.02em}
  .yr-badge.gray{background:#94A3B8}

  /* ====== Pagination ====== */
  .pagination{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fff;border-top:1px solid var(--border);font-size:12px;color:var(--text-sub)}
  .pager{display:flex;gap:4px;align-items:center}
  .pager button{width:30px;height:30px;border-radius:6px;color:var(--text-sub);font-weight:600;font-size:12px}
  .pager button:hover{background:#F1F5F9}
  .pager button.active{background:var(--primary);color:#fff}

  /* ====== Card grid ====== */
  .card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
  .eng-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;box-shadow:var(--shadow);transition:all .15s}
  .eng-card:hover{box-shadow:var(--shadow-md);border-color:var(--border-strong);cursor:pointer}
  .eng-card-head{display:flex;align-items:flex-start;gap:12px;margin-bottom:12px}
  .eng-card-head .initial-badge{width:44px;height:44px;font-size:14px}
  .eng-card-name{font-weight:700;font-size:14px;color:var(--text)}
  .eng-card-sub{font-size:11px;color:var(--text-mute);margin-top:2px}
  .eng-card-body{font-size:12px;color:var(--text-sub)}
  .eng-card-skills{margin-top:10px;display:flex;flex-wrap:wrap;gap:3px}
  .eng-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:10px;border-top:1px solid var(--border);font-size:11px;color:var(--text-mute)}

  /* ====== C-02 詳細 ====== */
  .c02-grid{display:grid;grid-template-columns:280px 1fr;gap:16px}
  .profile-card .initial-large{width:96px;height:96px;font-size:28px;margin:0 auto 12px;border-radius:18px}
  .profile-name{text-align:center;font-size:18px;font-weight:700}
  .profile-sub{text-align:center;font-size:11px;color:var(--text-mute);margin-top:2px}
  .profile-meta{margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
  .profile-row{display:flex;justify-content:space-between;padding:6px 0;font-size:12px}
  .profile-row .lbl{color:var(--text-mute);font-weight:500}
  .profile-row .val{color:var(--text);font-weight:600;text-align:right}

  .tabs{display:flex;border-bottom:1px solid var(--border);background:#fff;border-top-left-radius:12px;border-top-right-radius:12px;padding:0 4px}
  .tab{padding:12px 16px;font-size:13px;color:var(--text-sub);font-weight:500;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
  .tab:hover{color:var(--text)}
  .tab.active{color:var(--primary);border-bottom-color:var(--primary);font-weight:600}
  .tab-panel{background:#fff;border:1px solid var(--border);border-top:none;border-radius:0 0 12px 12px;padding:18px;min-height:480px}

  .skill-matrix{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}
  .skill-group{border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .skill-group-head{padding:8px 12px;background:#F8FAFC;border-bottom:1px solid var(--border);font-size:11px;font-weight:700;color:var(--text-sub);letter-spacing:.03em;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center}
  .skill-group-head .grp-ic{font-size:14px}
  .skill-group-body{padding:6px 0}
  .skill-row{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:10px;padding:6px 12px;font-size:12.5px;border-bottom:1px dashed #F1F5F9}
  .skill-row:last-child{border-bottom:none}
  .skill-row .skill-name{color:var(--text);font-weight:500}

  /* AI group highlight */
  .skill-group.ai-group{border-color:#FCD34D;background:linear-gradient(180deg,#FFFBEB 0%,#fff 60%)}
  .skill-group.ai-group .skill-group-head{background:#FEF3C7;color:#92400E;border-bottom-color:#FCD34D}

  /* Timeline 経歴 */
  .timeline{position:relative;padding-left:24px}
  .timeline::before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:var(--border)}
  .tl-item{position:relative;padding-bottom:20px}
  .tl-item::before{content:"";position:absolute;left:-21px;top:6px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--primary)}
  .tl-period{font-size:11px;color:var(--text-mute);font-weight:600;letter-spacing:.02em}
  .tl-title{font-size:14px;font-weight:700;margin:3px 0}
  .tl-meta{font-size:12px;color:var(--text-sub);margin-bottom:6px}
  .tl-desc{font-size:12px;color:var(--text-sub)}
  .tl-tags{margin-top:8px;display:flex;flex-wrap:wrap;gap:3px}
  .tl-phase{display:inline-flex;gap:3px;margin-top:6px}
  .phase-chip{font-size:9px;padding:1px 5px;border-radius:3px;background:#F1F5F9;color:var(--text-mute);font-weight:600}
  .phase-chip.on{background:var(--primary);color:#fff}

  /* ====== D-01 一覧 ====== */
  .ss-table .col-thumb{width:42px}
  .ss-thumb{width:32px;height:42px;background:#fff;border:1px solid var(--border);border-radius:3px;display:flex;align-items:center;justify-content:center;color:var(--primary);font-size:9px;font-weight:700}

  /* ====== D-02 AI生成 ステップ ====== */
  .stepper{display:flex;background:#fff;border:1px solid var(--border);border-radius:12px;padding:18px;margin-bottom:18px;justify-content:space-between;position:relative}
  .stepper::before{content:"";position:absolute;top:50%;left:60px;right:60px;height:2px;background:var(--border);z-index:0}
  .step{display:flex;align-items:center;gap:10px;background:#fff;padding:0 14px;z-index:1;position:relative}
  .step-num{width:30px;height:30px;border-radius:50%;background:#F1F5F9;color:var(--text-mute);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .step.done .step-num{background:var(--success);color:#fff}
  .step.done .step-num::after{content:"✓"}
  .step.done .step-num span{display:none}
  .step.active .step-num{background:var(--primary);color:#fff;box-shadow:0 0 0 4px var(--primary-light)}
  .step-label{font-size:12px;font-weight:600;color:var(--text-sub)}
  .step.active .step-label{color:var(--primary)}
  .step.done .step-label{color:var(--text)}

  .gen-grid{display:grid;grid-template-columns:1fr 360px;gap:16px;align-items:start}
  .form-field{margin-bottom:14px}
  .form-label{display:block;font-size:12px;font-weight:600;color:var(--text);margin-bottom:5px}
  .form-label .req{color:var(--danger);margin-left:3px}
  .form-input,.form-textarea{width:100%;padding:9px 11px;border:1px solid var(--border-strong);border-radius:7px;font-size:13px;font-family:inherit;color:var(--text);background:#fff}
  .form-input:focus,.form-textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
  .form-textarea{resize:vertical;min-height:88px}
  .form-help{font-size:11px;color:var(--text-mute);margin-top:4px}
  .checkbox-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
  .check-pill{display:flex;align-items:center;gap:7px;padding:7px 10px;background:#F8FAFC;border:1px solid var(--border);border-radius:6px;font-size:12px;cursor:pointer}
  .check-pill input{margin:0}
  .check-pill:has(input:checked){background:var(--primary-light);border-color:var(--primary);color:var(--primary);font-weight:600}

  .target-card{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--border);border-radius:8px;margin-bottom:6px;cursor:pointer;background:#fff}
  .target-card:hover{border-color:var(--border-strong);background:#F8FAFC}
  .target-card.selected{border-color:var(--primary);background:var(--primary-light)}
  .target-info{flex:1;min-width:0}
  .target-init{font-weight:700;font-size:13px}
  .target-meta{font-size:11px;color:var(--text-mute);margin-top:2px}

  .ai-side-card{background:linear-gradient(135deg,#1E1B4B 0%,#312E81 100%);color:#fff;border-radius:12px;padding:18px;box-shadow:var(--shadow-md)}
  .ai-side-card h3{font-size:14px;font-weight:700;margin-bottom:8px;display:flex;align-items:center;gap:8px}
  .ai-side-card p{font-size:12px;color:#C7D2FE;line-height:1.6}
  .ai-side-card .ai-btn{margin-top:16px;width:100%;background:#fff;color:var(--primary);padding:11px;border-radius:8px;font-weight:700;font-size:13px}
  .ai-side-card .ai-meta{margin-top:14px;padding-top:14px;border-top:1px solid rgba(255,255,255,.15);font-size:11px;color:#A5B4FC}

  .keyword-input-area{padding:10px;background:#F8FAFC;border:1px dashed var(--border-strong);border-radius:8px;min-height:80px}
  .kw-chip{display:inline-flex;align-items:center;gap:5px;background:#fff;border:1px solid var(--border-strong);padding:4px 10px;border-radius:999px;font-size:12px;margin:3px;color:var(--text)}
  .kw-chip .x{color:var(--text-mute);cursor:pointer;font-weight:700}

  /* ====== D-03 A4縦プレビュー ====== */
  .preview-toolbar{background:#fff;border:1px solid var(--border);border-radius:10px;padding:10px 14px;margin-bottom:16px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
  .preview-toolbar .tb-group{display:flex;align-items:center;gap:6px}
  .preview-toolbar .divider{width:1px;height:24px;background:var(--border)}
  .zoom-ctrl{display:flex;align-items:center;border:1px solid var(--border-strong);border-radius:6px;overflow:hidden}
  .zoom-ctrl button{padding:4px 8px;font-size:13px;color:var(--text-sub)}
  .zoom-ctrl button:hover{background:#F1F5F9}
  .zoom-ctrl span{padding:0 8px;font-size:12px;font-weight:600;border-left:1px solid var(--border);border-right:1px solid var(--border);min-width:50px;text-align:center}

  .preview-stage{background:#E2E8F0;padding:30px;border-radius:12px;display:flex;justify-content:center;min-height:600px;overflow:auto}
  /* A4縦: 210mm x 297mm = 794 x 1123 px at 96dpi */
  .a4-paper{width:794px;min-height:1123px;background:#fff;box-shadow:0 8px 24px rgba(0,0,0,.12);padding:32px 28px;font-size:10px;line-height:1.5;color:#111;font-family:"Hiragino Kaku Gothic ProN","Noto Sans JP","Meiryo",sans-serif}
  .a4-header{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #111;padding-bottom:6px;margin-bottom:10px}
  .a4-title{font-size:18px;font-weight:700;letter-spacing:.05em}
  .a4-title small{font-size:10px;font-weight:500;color:#555;margin-left:8px}
  .a4-date{font-size:10px;color:#555}
  .a4-section{margin-bottom:10px}
  .a4-section-h{background:#1E293B;color:#fff;padding:3px 8px;font-size:10px;font-weight:700;letter-spacing:.05em;margin-bottom:4px;border-radius:1px}
  .a4-prof-table{width:100%;border-collapse:collapse;font-size:10px}
  .a4-prof-table td{border:1px solid #888;padding:4px 6px;vertical-align:top}
  .a4-prof-table .lbl{background:#F1F5F9;font-weight:700;width:80px;color:#334155}
  .a4-prof-table .val{font-weight:500}
  .a4-tech-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:3px;font-size:9px}
  .a4-tech-cat{background:#F8FAFC;border:1px solid #CBD5E1;border-radius:2px;padding:4px}
  .a4-tech-cat-h{font-size:9px;font-weight:700;color:#1E293B;border-bottom:1px solid #CBD5E1;padding-bottom:2px;margin-bottom:3px;letter-spacing:.02em}
  .a4-tech-cat.ai-cat{background:#FFFBEB;border-color:#FCD34D}
  .a4-tech-cat.ai-cat .a4-tech-cat-h{color:#92400E;border-bottom-color:#FCD34D;display:flex;align-items:center;gap:4px}
  .a4-tech-cat.ai-cat .a4-tech-cat-h::after{content:"NEW";background:#92400E;color:#FFFBEB;font-size:7px;padding:0 4px;border-radius:2px;letter-spacing:.05em}
  .a4-tech-item{display:flex;justify-content:space-between;align-items:center;padding:1px 0;font-size:9px}
  .a4-tech-mark{font-weight:700;font-family:"SF Mono",Consolas,monospace;font-size:10px}
  .a4-mark-d{color:#1D4ED8}/* ◎ */
  .a4-mark-s{color:#4F46E5}/* ○ */
  .a4-mark-t{color:#92400E}/* △ */
  .a4-mark-n{color:#94A3B8}
  .a4-yr{background:#0F172A;color:#fff;font-size:7px;padding:0 4px;border-radius:6px;margin-left:3px;font-weight:700}
  .a4-yr.gr{background:#94A3B8}

  .a4-exp-table{width:100%;border-collapse:collapse;font-size:9px}
  .a4-exp-table th,.a4-exp-table td{border:1px solid #888;padding:4px 5px;vertical-align:top;text-align:left}
  .a4-exp-table th{background:#1E293B;color:#fff;font-weight:700;text-align:center}
  .a4-exp-table .c-period{width:74px}
  .a4-exp-table .c-no{width:18px;text-align:center;font-weight:700}
  .a4-exp-table .c-role{width:48px}
  .a4-exp-table .c-scale{width:55px}
  .a4-exp-table .c-phase{width:100px}
  .a4-exp-table .c-tech{width:120px}
  .a4-phase-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0;font-size:7px;text-align:center}
  .a4-phase-grid .ph-h{background:#F1F5F9;border:1px solid #888;padding:1px;writing-mode:vertical-rl;font-weight:600;height:42px;letter-spacing:.05em}
  .a4-phase-grid .ph-c{border:1px solid #888;height:14px;display:flex;align-items:center;justify-content:center;font-size:9px}
  .a4-phase-grid .ph-c.on{background:#4F46E5;color:#fff}

  .a4-summary{display:grid;grid-template-columns:90px 1fr;border:1px solid #888;font-size:10px}
  .a4-summary > div{padding:4px 6px;border-right:1px solid #888}
  .a4-summary > div:last-child{border-right:none}
  .a4-summary .lbl{background:#F1F5F9;font-weight:700;color:#334155}

  /* ====== Misc helpers ====== */
  .flex{display:flex}
  .gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
  .items-center{align-items:center}
  .ml-auto{margin-left:auto}
  .mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}.mt-5{margin-top:20px}
  .mb-2{margin-bottom:8px}.mb-3{margin-bottom:12px}.mb-4{margin-bottom:16px}
  .text-mute{color:var(--text-mute)}
  .text-sub{color:var(--text-sub)}
  .text-sm{font-size:12px}
  .text-xs{font-size:11px}
  .fw-7{font-weight:700}
  .fw-6{font-weight:600}

  /* Privacy note */
  .privacy-note{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;background:#FEF2F2;color:var(--danger);border-radius:6px;font-size:11px;font-weight:600;border:1px solid #FECACA}
  .privacy-note::before{content:"🔒"}

  /* View toggle for C-01 */
  .view-toggle{display:inline-flex;border:1px solid var(--border-strong);border-radius:8px;overflow:hidden;background:#fff}
  .view-toggle button{padding:6px 10px;font-size:12px;color:var(--text-sub);border-right:1px solid var(--border);display:flex;align-items:center;gap:5px}
  .view-toggle button:last-child{border-right:none}
  .view-toggle button.active{background:var(--primary);color:#fff;font-weight:600}


  /* ====== Mockup polish ====== */
  body{background:#F1F5F9}
  .card{box-shadow:0 1px 2px rgba(15,23,42,.04), 0 1px 3px rgba(15,23,42,.06)}
  .kpi{transition:transform .15s,box-shadow .15s}
  .kpi:hover{transform:translateY(-1px);box-shadow:0 4px 8px rgba(15,23,42,.06)}

  /* ====== Functional tabs ====== */
  .tab-panel{display:none}
  .tab-panel.active{display:block}

  /* ====== Career timeline (業務経歴) ====== */
  .career-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
  .career-stat{background:#F8FAFC;border:1px solid var(--border);border-radius:8px;padding:10px 12px}
  .career-stat-label{font-size:10px;color:var(--text-mute);font-weight:600;letter-spacing:.03em;margin-bottom:4px}
  .career-stat-val{font-size:18px;font-weight:700;color:var(--text)}
  .career-stat-val small{font-size:11px;color:var(--text-sub);font-weight:500;margin-left:3px}

  .career-list{position:relative;padding-left:28px}
  .career-list::before{content:"";position:absolute;left:9px;top:8px;bottom:8px;width:2px;background:linear-gradient(180deg,var(--primary) 0%,var(--accent) 100%);border-radius:1px}
  .career-item{position:relative;background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px 16px;margin-bottom:14px;box-shadow:var(--shadow);transition:all .15s}
  .career-item:hover{border-color:var(--border-strong);box-shadow:var(--shadow-md)}
  .career-item::before{content:"";position:absolute;left:-23px;top:18px;width:14px;height:14px;border-radius:50%;background:#fff;border:3px solid var(--primary);box-shadow:0 0 0 3px #fff}
  .career-item.latest::before{background:var(--primary)}
  .ci-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;margin-bottom:8px}
  .ci-period{font-size:11px;color:var(--text-mute);font-weight:600;letter-spacing:.02em}
  .ci-duration{display:inline-block;background:var(--primary-light);color:var(--primary);font-size:10px;font-weight:700;padding:1px 6px;border-radius:4px;margin-left:6px}
  .ci-title{font-size:14px;font-weight:700;color:var(--text);margin:2px 0 4px}
  .ci-meta{font-size:11px;color:var(--text-sub);display:flex;flex-wrap:wrap;gap:10px;align-items:center}
  .ci-meta-item{display:inline-flex;align-items:center;gap:3px}
  .ci-meta-item::before{content:"";display:inline-block;width:3px;height:3px;border-radius:50%;background:var(--text-mute);margin-right:4px}
  .ci-meta-item:first-child::before{display:none}
  .ci-desc{font-size:12px;color:var(--text-sub);margin-top:8px;line-height:1.7}
  .ci-tags{margin-top:10px;display:flex;flex-wrap:wrap;gap:3px}
  .ci-phases{margin-top:10px;display:flex;gap:0;border:1px solid var(--border);border-radius:6px;overflow:hidden;width:fit-content}
  .ci-phase{font-size:9px;padding:4px 8px;background:#F8FAFC;color:var(--text-mute);font-weight:600;border-right:1px solid var(--border);text-align:center;min-width:54px;letter-spacing:.02em}
  .ci-phase:last-child{border-right:none}
  .ci-phase.on{background:var(--primary);color:#fff}

  /* ====== 実績・評価 ====== */
  .eval-summary{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:18px}
  .eval-score-card{background:linear-gradient(135deg,#312E81 0%,#4F46E5 100%);color:#fff;border-radius:12px;padding:18px;display:flex;align-items:center;gap:16px}
  .eval-score-big{font-size:42px;font-weight:800;line-height:1;letter-spacing:-.02em}
  .eval-score-big small{font-size:14px;font-weight:600;color:#C7D2FE;margin-left:4px}
  .eval-score-info{flex:1}
  .eval-score-label{font-size:11px;color:#C7D2FE;font-weight:600;margin-bottom:4px;letter-spacing:.03em;text-transform:uppercase}
  .eval-score-sub{font-size:12px;color:#E0E7FF;margin-top:4px}
  .stars{display:inline-flex;gap:2px;color:#FBBF24;font-size:14px}
  .stars.gray{color:#CBD5E1}

  .radar-container{background:#fff;border:1px solid var(--border);border-radius:12px;padding:14px;text-align:center}
  .radar-title{font-size:12px;font-weight:700;color:var(--text);margin-bottom:8px}
  .radar-svg{width:100%;max-width:280px;height:auto}

  .review-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .review-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:14px;transition:all .15s}
  .review-card:hover{box-shadow:var(--shadow-md)}
  .review-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
  .review-from{font-size:12px;font-weight:600;color:var(--text)}
  .review-from .review-type{display:inline-block;background:var(--primary-light);color:var(--primary);font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;margin-right:5px;letter-spacing:.03em;vertical-align:middle}
  .review-date{font-size:10px;color:var(--text-mute)}
  .review-body{font-size:12px;color:var(--text-sub);line-height:1.7}
  .review-proj{font-size:10px;color:var(--text-mute);margin-top:8px;padding-top:8px;border-top:1px dashed var(--border)}

  .award-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .award-card{background:linear-gradient(135deg,#FEF3C7 0%,#FDE68A 100%);border:1px solid #FCD34D;border-radius:10px;padding:12px;text-align:center}
  .award-icon{font-size:24px;margin-bottom:4px}
  .award-title{font-size:11px;font-weight:700;color:#92400E}
  .award-date{font-size:10px;color:#92400E;opacity:.8;margin-top:2px}

  /* ====== 資格・学歴 ====== */
  .cert-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:16px}
  .cert-stat{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;text-align:center}
  .cert-stat-num{font-size:24px;font-weight:800;color:var(--primary);line-height:1}
  .cert-stat-label{font-size:11px;color:var(--text-mute);font-weight:600;margin-top:4px}

  .edu-section{margin-bottom:18px}
  .edu-section-head{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;padding-left:8px;border-left:3px solid var(--primary)}

  .edu-timeline{position:relative;padding-left:24px}
  .edu-timeline::before{content:"";position:absolute;left:7px;top:4px;bottom:4px;width:2px;background:var(--border)}
  .edu-item{position:relative;padding-bottom:14px}
  .edu-item::before{content:"🎓";position:absolute;left:-23px;top:0;width:18px;height:18px;display:flex;align-items:center;justify-content:center;font-size:11px}
  .edu-period{font-size:11px;color:var(--text-mute);font-weight:600}
  .edu-title{font-size:13px;font-weight:700;color:var(--text);margin:2px 0}
  .edu-meta{font-size:12px;color:var(--text-sub)}

  .cert-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
  .cert-card{background:#fff;border:1px solid var(--border);border-radius:10px;padding:12px;display:flex;align-items:center;gap:10px;transition:all .15s}
  .cert-card:hover{border-color:var(--border-strong);box-shadow:var(--shadow)}
  .cert-badge{width:42px;height:42px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:#fff;flex-shrink:0;letter-spacing:.02em}
  .badge-aws-pro{background:linear-gradient(135deg,#F97316,#EA580C)}
  .badge-aws-asc{background:linear-gradient(135deg,#FB923C,#F97316)}
  .badge-aws-spec{background:linear-gradient(135deg,#7C2D12,#9A3412)}
  .badge-aws-found{background:linear-gradient(135deg,#FDBA74,#FB923C)}
  .badge-ipa{background:linear-gradient(135deg,#1E40AF,#1E3A8A)}
  .badge-stat{background:linear-gradient(135deg,#059669,#047857)}
  .cert-info{flex:1;min-width:0}
  .cert-name{font-size:12.5px;font-weight:600;color:var(--text);line-height:1.4}
  .cert-date{font-size:10px;color:var(--text-mute);margin-top:2px}
  .cert-level{display:inline-block;font-size:9px;font-weight:700;padding:1px 5px;border-radius:3px;background:#F1F5F9;color:var(--text-sub);margin-left:5px;letter-spacing:.03em}
  .cert-level.pro{background:#FEF3C7;color:#92400E}
  .cert-level.spec{background:#FCE7F3;color:#9F1239}

  /* ====== 自己PR・志向 ====== */
  .pr-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .pr-strength-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;position:relative;overflow:hidden}
  .pr-strength-card::before{content:"";position:absolute;top:0;left:0;width:4px;height:100%;background:var(--primary)}
  .pr-strength-num{font-size:11px;font-weight:800;color:var(--primary);letter-spacing:.05em;margin-bottom:4px}
  .pr-strength-title{font-size:15px;font-weight:700;color:var(--text);margin-bottom:8px}
  .pr-strength-body{font-size:12px;color:var(--text-sub);line-height:1.7}

  .pr-section{background:#fff;border:1px solid var(--border);border-radius:12px;padding:16px;margin-bottom:14px}
  .pr-section-h{font-size:13px;font-weight:700;color:var(--text);margin-bottom:10px;display:flex;align-items:center;gap:8px}
  .pr-section-h .pr-ic{width:22px;height:22px;background:var(--primary-light);color:var(--primary);border-radius:6px;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
  .interest-tags{display:flex;flex-wrap:wrap;gap:6px}
  .interest-tag{background:var(--primary-light);color:var(--primary);font-size:12px;font-weight:600;padding:5px 12px;border-radius:999px;border:1px solid #C7D2FE}
  .career-path{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  .career-path-item{background:#F8FAFC;border:1px solid var(--border);border-radius:8px;padding:12px}
  .career-path-period{font-size:10px;color:var(--text-mute);font-weight:700;letter-spacing:.03em}
  .career-path-title{font-size:12.5px;font-weight:700;color:var(--text);margin:4px 0}
  .career-path-desc{font-size:11px;color:var(--text-sub);line-height:1.6}
  .value-list{list-style:none;padding:0}
  .value-list li{padding:7px 0;border-bottom:1px dashed var(--border);font-size:12.5px;color:var(--text);display:flex;align-items:flex-start;gap:8px}
  .value-list li:last-child{border-bottom:none}
  .value-list li::before{content:"✓";color:var(--success);font-weight:700;flex-shrink:0}

  /* ====== 変更履歴 ====== */
  .history-filter{display:flex;gap:8px;margin-bottom:14px;align-items:center}
  .hist-table{width:100%;border-collapse:separate;border-spacing:0;background:#fff;font-size:12.5px;border:1px solid var(--border);border-radius:10px;overflow:hidden}
  .hist-table thead th{background:#F8FAFC;color:var(--text-sub);font-weight:600;font-size:11px;text-align:left;padding:10px 12px;border-bottom:1px solid var(--border);letter-spacing:.03em;text-transform:uppercase}
  .hist-table tbody td{padding:12px;border-bottom:1px solid var(--border);vertical-align:top}
  .hist-table tbody tr:last-child td{border-bottom:none}
  .hist-table tbody tr:hover{background:#F8FAFC}
  .hist-action{display:inline-flex;align-items:center;gap:5px;padding:3px 8px;border-radius:5px;font-size:11px;font-weight:700;letter-spacing:.02em;white-space:nowrap}
  .hist-action.update{background:#DBEAFE;color:#1E40AF}
  .hist-action.create{background:#DCFCE7;color:#166534}
  .hist-action.delete{background:#FEE2E2;color:#991B1B}
  .hist-action.ai{background:#FEF3C7;color:#92400E}
  .hist-diff{margin-top:6px;font-size:11px;font-family:"SF Mono",Consolas,monospace;background:#F8FAFC;border:1px solid var(--border);border-radius:5px;padding:6px 8px}
  .diff-before{color:#991B1B;text-decoration:line-through;opacity:.8}
  .diff-after{color:#166534;font-weight:600}
  .diff-arrow{color:var(--text-mute);margin:0 6px}

  /* tab counter badge */
  .tab .tab-cnt{display:inline-block;background:#F1F5F9;color:var(--text-mute);font-size:9px;font-weight:700;padding:1px 5px;border-radius:8px;margin-left:5px;vertical-align:middle}
  .tab.active .tab-cnt{background:var(--primary-light);color:var(--primary)}