/* Starplay CRM — brand palette, dense phone-first layout */
:root{
  --paper:#FAF8FF; --ink:#2E2350; --ink-soft:#5B5178;
  --lime:#C8F24E; --lime-deep:#9CCB1F; --lime-text:#55700F;
  --bubblegum:#FFC2DB; --sky:#B4DDF5; --sun:#FFD97A; --card:#fff;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; background:var(--paper); color:var(--ink); line-height:1.45; font-size:15px;}
button{font:inherit; cursor:pointer;}
a{color:inherit;}
code{background:#EEE9FA; border-radius:4px; padding:1px 5px; font-size:.85em;}

.topbar{position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:10px; background:var(--ink); color:#fff; padding:10px 14px;}
.topbar .logo{font-weight:800; letter-spacing:-.01em;}
.topbar .logo b{color:var(--lime); font-weight:800;}
.topbar .star{color:var(--lime); display:inline-block; transform:rotate(-12deg);}
.tabs{display:flex; gap:6px;}
.tabs a{color:#CFC8E8; text-decoration:none; padding:6px 12px; border-radius:999px; font-weight:600; font-size:.9rem;}
.tabs a.on{background:var(--lime); color:var(--ink);}
.badge{background:var(--bubblegum); color:var(--ink); border-radius:999px; padding:1px 7px; font-size:.75rem; font-weight:800; vertical-align:middle;}

/* global search */
.search-wrap{position:relative; flex:1; max-width:340px; min-width:120px;}
.search-wrap input{width:100%; border:2px solid transparent; border-radius:999px; padding:6px 14px; font:inherit; font-size:.85rem; background:rgba(255,255,255,.14); color:#fff;}
.search-wrap input::placeholder{color:#CFC8E8;}
.search-wrap input:focus{outline:none; border-color:var(--lime); background:#fff; color:var(--ink);}
.search-results{position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:2px solid var(--ink); border-radius:12px; box-shadow:0 4px 0 rgba(46,35,80,.2); max-height:320px; overflow-y:auto; z-index:30;}
.search-results button{display:block; width:100%; text-align:left; background:none; border:none; border-bottom:1px solid #EEE9FA; padding:9px 12px; font-size:.85rem; color:var(--ink);}
.search-results button:hover, .search-results button:focus{background:var(--paper);}
.search-results .sr-meta{display:block; color:var(--ink-soft); font-size:.75rem;}
.search-results .sr-empty{padding:10px 12px; color:var(--ink-soft); font-size:.85rem;}

.banner{background:var(--sun); border-bottom:2px solid var(--ink); padding:10px 14px; font-size:.9rem;}
.banner button{margin-left:8px; border:2px solid var(--ink); background:#fff; border-radius:8px; padding:2px 10px;}

main{padding:14px; max-width:1200px; margin:0 auto;}
.muted{color:var(--ink-soft);}
.small{font-size:.82rem;}
h2{font-size:1.15rem; margin-bottom:10px;}
.spin{padding:40px; text-align:center; color:var(--ink-soft);}

/* pipeline */
.board{display:flex; gap:10px; overflow-x:auto; padding-bottom:14px; align-items:flex-start; -webkit-overflow-scrolling:touch;}
.col{min-width:230px; flex:0 0 230px; background:#F1EDFB; border:1.5px solid #DCD3F0; border-radius:12px; padding:0 8px 8px; max-height:calc(100vh - 150px); overflow-y:auto;}
.col h3{position:sticky; top:0; z-index:2; background:#F1EDFB; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin:0 -8px; padding:10px 12px 8px; display:flex; justify-content:space-between;}
.more-cards{display:block; width:100%; border:1.5px dashed var(--ink-soft); background:none; border-radius:10px; padding:7px; font-size:.8rem; font-weight:700; color:var(--ink-soft); margin-top:2px;}
.more-cards:hover{background:#fff;}
.col.drag-over{outline:3px dashed var(--lime-deep); outline-offset:-3px;}
.card{background:#fff; border:1.5px solid var(--ink); border-radius:10px; padding:9px 10px; margin-bottom:8px; cursor:pointer; box-shadow:0 2px 0 rgba(46,35,80,.12);}
.card b{display:block; font-size:.92rem;}
.card .meta{font-size:.8rem; color:var(--ink-soft);}
.card .total{font-weight:700; font-size:.85rem; margin-top:2px;}
.card .flag{display:inline-block; background:var(--sun); border-radius:6px; font-size:.7rem; padding:0 6px; font-weight:700; margin-left:4px;}
.card select{width:100%; margin-top:6px; border:1.5px solid var(--ink-soft); border-radius:8px; padding:3px 6px; font-size:.8rem; background:#fff; color:var(--ink);}

/* detail */
.back{display:inline-block; margin-bottom:10px; font-weight:700; text-decoration:none; color:var(--ink-soft);}
.panel{background:#fff; border:2px solid var(--ink); border-radius:14px; padding:16px; margin-bottom:14px; box-shadow:0 3px 0 rgba(46,35,80,.12);}
.panel h3{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--ink-soft); margin-bottom:8px;}
.contact-row{display:flex; gap:8px; flex-wrap:wrap; margin-top:10px;}
.contact-row a, .btn{display:inline-block; border:2px solid var(--ink); border-radius:999px; padding:7px 14px; font-weight:700; font-size:.85rem; text-decoration:none; background:#fff; color:var(--ink);}
.btn-lime{background:var(--lime); box-shadow:0 2px 0 var(--ink);}
.btn-pink{background:var(--bubblegum);}
.btn[disabled]{opacity:.5; cursor:not-allowed;}
table.calc{width:100%; border-collapse:collapse; font-size:.92rem;}
table.calc td{padding:5px 2px; border-bottom:1px solid #EEE9FA;}
table.calc td.r{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap;}
table.calc tr.total td{font-weight:800; border-top:2px solid var(--ink); border-bottom:none; font-size:1rem;}
table.calc tr.dim td{color:var(--ink-soft); font-size:.85rem; border-bottom:none;}
.field-row{display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px;}
.field-row label{font-size:.8rem; font-weight:700; color:var(--ink-soft);}
.field-row input[type=text], .field-row input[type=number], .field-row select, textarea{border:2px solid var(--ink); border-radius:9px; padding:7px 10px; font:inherit; background:#fff; color:var(--ink);}
textarea{width:100%; margin-top:6px;}
.linkbox{background:var(--paper); border:2px dashed var(--ink-soft); border-radius:10px; padding:10px; margin-top:10px; font-size:.85rem; word-break:break-all;}
.log{list-style:none; font-size:.85rem;}
.log li{padding:6px 0; border-bottom:1px solid #EEE9FA;}
.log .when{color:var(--ink-soft); font-size:.78rem;}
.paidchip{display:inline-block; background:var(--lime); border:1.5px solid var(--ink); border-radius:999px; padding:2px 10px; font-size:.78rem; font-weight:800;}

/* calendar */
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:10px;}
.cal-head button{border:2px solid var(--ink); background:#fff; border-radius:8px; padding:4px 12px; font-weight:800;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:4px;}
.cal-grid .dow{font-size:.7rem; text-transform:uppercase; color:var(--ink-soft); text-align:center; padding:4px 0;}
.day{min-height:74px; background:#fff; border:1.5px solid #DCD3F0; border-radius:8px; padding:3px 4px; font-size:.78rem;}
.day.other{background:transparent; border-color:transparent;}
.day .n{color:var(--ink-soft);}
.day.today .n{background:var(--lime); border-radius:999px; padding:0 6px; font-weight:800; color:var(--ink);}
.evt{display:block; width:100%; text-align:left; background:var(--sky); border:1.5px solid var(--ink); border-radius:6px; padding:1px 4px; margin-top:3px; font-size:.72rem; font-weight:700; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;}
.evt.done{background:var(--lime);}

/* event sheet */
.sheet-wrap{position:fixed; inset:0; background:rgba(46,35,80,.45); z-index:40; display:flex; align-items:flex-end; justify-content:center;}
.sheet{background:#fff; border:2px solid var(--ink); border-radius:16px 16px 0 0; width:100%; max-width:560px; padding:18px 16px 26px; max-height:80vh; overflow-y:auto;}
.sheet h2{display:flex; justify-content:space-between; align-items:center;}
.sheet .x{border:none; background:none; font-size:1.4rem; line-height:1;}

@media(max-width:560px){
  .col{min-width:200px; flex-basis:200px;}
  main{padding:10px;}
}