:root {
  --bg: #0D1B2A;
  --bg-card: #132238;
  --bg-input: #0f1826;
  --text: #e0e6ef;
  --text-secondary: #8da0b8;
  --text-muted: #4a6074;
  --primary: #0984E3;
  --secondary: #74B9FF;
  --accent: #E17055;
  --green: #00cec9;
  --border: rgba(9,132,227,0.08);
  --border-strong: rgba(9,132,227,0.2);
  --radius: 12px;
  --font: 'Inter',system-ui,sans-serif;
  --transition: 0.2s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh}

.header{display:flex;align-items:center;justify-content:space-between;padding:6px 16px;background:var(--bg-card);border-bottom:1px solid var(--border);height:42px;position:sticky;top:0;z-index:10}
.header-left,.header-right{display:flex;align-items:center;gap:8px}
.logo{font-size:1.1rem}
h1{font-size:0.92rem;font-weight:700;color:var(--primary)}

.btn,.btn-sm{padding:5px 10px;border:1px solid var(--border);border-radius:8px;background:transparent;color:var(--text-secondary);font-family:var(--font);font-size:0.72rem;cursor:pointer;transition:all var(--transition);white-space:nowrap}
.btn:hover,.btn-sm:hover{border-color:var(--primary);color:var(--primary)}
.btn-sm{font-size:0.68rem;padding:4px 8px;margin-top:6px}

.content{max-width:800px;margin:0 auto;padding:16px}

.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:12px;transition:all 0.3s ease}
.card:hover{border-color:var(--border-strong)}
.card h2{font-size:0.85rem;font-weight:700;color:var(--secondary);margin-bottom:12px;padding-bottom:6px;border-bottom:1px solid var(--border)}

.row{display:flex;gap:10px;margin-bottom:0}
.row .form-group{flex:1}
.flex-2{flex:2!important}

.form-group{margin-bottom:8px}
.form-group label{display:block;font-size:0.68rem;font-weight:600;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:3px}
.input,.textarea,.select{width:100%;padding:7px 10px;border:1px solid var(--border);border-radius:8px;background:var(--bg-input);color:var(--text);font-family:var(--font);font-size:0.8rem;transition:border var(--transition)}
.input:focus,.textarea:focus,.select:focus{outline:none;border-color:var(--primary)}
.textarea{resize:vertical}

/* Timeline entry */
.tl-entry{display:flex;gap:6px;align-items:flex-start;margin-bottom:6px;padding:6px 8px;background:rgba(9,132,227,0.03);border-radius:8px;border:1px solid var(--border)}
.tl-entry input{flex:1}
.tl-entry .tl-time{width:80px;flex-shrink:0}
.tl-entry .btn-del{padding:4px 6px;font-size:0.65rem;color:var(--accent);border-color:transparent}
.tl-entry .btn-del:hover{border-color:var(--accent)}

/* Action item */
.action-entry{display:flex;gap:6px;align-items:flex-start;margin-bottom:6px;padding:6px 8px;background:rgba(225,112,85,0.03);border-radius:8px;border:1px solid var(--border)}
.action-entry input,.action-entry select{flex:1}
.action-entry .action-owner{width:100px;flex-shrink:0}
.action-entry .action-priority{width:90px;flex-shrink:0}

@media print{
  .header{position:static}
  .btn,.btn-sm{display:none}
  body{background:#fff;color:#111}
  .card{border:1px solid #ddd;background:#fff}
  .card h2{color:#0984E3}
  .input,.textarea,.select{border:1px solid #ccc;background:#f9f9f9;color:#111}
}

@media(max-width:640px){
  .row{flex-direction:column;gap:0}
  .content{padding:8px}
}