/*  ═══════════════════════════════════════════════════════════════
    Task Command Center — Stylesheet
    Extracted from the original single-file HTML, plus login &
    sync-badge additions at the bottom.
    ═══════════════════════════════════════════════════════════════ */

:root{
  --bg:#FFFFFF; --surface:#F9F8F7; --surface2:#F0EFED; --border:#E6E5E3;
  --text:#2C2C2B; --muted:#7D7A75;
  --blue:#2783DE; --blue-soft:#E5F2FC;
  --green:#46A171; --green-soft:#E8F1EC;
  --orange:#D5803B; --orange-soft:#FBEBDE;
  --red:#E56458; --red-soft:#FCE9E7;
  --purple:#8F62C9; --purple-soft:#F1E9FA;
  --shadow:0 1px 2px rgba(0,0,0,.05),0 4px 12px rgba(0,0,0,.04);
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#191919; --surface:#202020; --surface2:#2E2E2C; --border:rgba(255,255,255,.2);
    --text:#FFFFFF; --muted:rgba(255,255,255,.65);
    --blue:#5E9FE8; --blue-soft:rgba(94,159,232,.14);
    --green:#72BC8F; --green-soft:rgba(114,188,143,.14);
    --orange:#DE9255; --orange-soft:rgba(222,146,85,.14);
    --red:#E97366; --red-soft:rgba(233,115,102,.14);
    --purple:#BF8EDA; --purple-soft:rgba(191,142,218,.14);
    --shadow:none;
  }
}
*{box-sizing:border-box}
html{font-size:16px}
body{margin:0;background:var(--bg);color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
  line-height:1.5;}
.container{max-width:1120px;margin:0 auto;padding:24px}
button{font:inherit;color:inherit;background:var(--surface);border:1px solid var(--border);border-radius:8px;cursor:pointer;min-height:44px;padding:8px 14px}
button:hover{background:var(--surface2)}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [contenteditable]:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
input,select,textarea{font:inherit;color:var(--text);background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;min-height:44px}
textarea{width:100%;min-height:88px;resize:vertical}
h1,h2,h3{line-height:1.25;margin:0 0 8px}
h2{font-size:1.4rem;margin-top:8px}
h3{font-size:1.1rem}
.muted{color:var(--muted)}
.small{font-size:.85rem}

/* inline editing affordance */
.ed{border-radius:4px;padding:1px 4px;margin:-1px -4px}
.ed:hover{outline:1px dashed var(--muted)}
.ed:focus{outline:2px solid var(--blue);background:var(--blue-soft)}

/* header */
.kicker{font-size:.78rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px;display:inline-block}
.titlerow{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:16px}
.titlerow h1{font-size:2.1rem;font-weight:700}
.actions{display:flex;gap:8px;flex-wrap:wrap}

/* banners */
.banner{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:16px}
.banner.warn{border-color:var(--red);background:var(--red-soft);display:flex;align-items:center;gap:12px;flex-wrap:wrap;animation:pulse 2.6s ease-in-out infinite}
.banner.warn strong{color:var(--red)}
.banner.warn button{border-color:var(--red);background:var(--bg);white-space:nowrap}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(229,100,88,.30)}50%{box-shadow:0 0 0 7px rgba(229,100,88,0)}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}
.banner.quote{border-color:var(--orange);background:var(--orange-soft);display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}
.banner.quote .q{font-style:italic}
.badge{display:inline-block;background:var(--bg);border:1px solid var(--orange);color:var(--orange);border-radius:999px;padding:4px 12px;font-size:.85rem;font-weight:600;white-space:nowrap}

/* stats */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.stat{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px 14px}
.stat .lbl{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.stat .val{font-size:1.6rem;font-weight:700;line-height:1.2}
.stat .sub{font-size:.8rem;color:var(--muted)}
.pbar{height:8px;background:var(--surface2);border-radius:4px;overflow:hidden;margin-top:8px}
.pbar>div{height:100%;background:var(--blue);border-radius:4px}

/* tabs */
.tabs{display:flex;gap:6px;border-bottom:1px solid var(--border);margin-bottom:20px;overflow-x:auto;padding-bottom:0}
.tabs button{border:none;background:none;border-radius:8px 8px 0 0;padding:10px 14px;white-space:nowrap;color:var(--muted);border-bottom:2px solid transparent}
.tabs button[aria-selected="true"]{color:var(--text);font-weight:600;border-bottom-color:var(--blue)}
.tabs button:hover{background:var(--surface)}
[role="tabpanel"][hidden]{display:none}

/* week nav + forms */
.weeknav{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.weeknav strong{font-size:1.05rem;margin-left:4px}
.addform{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:12px}
.addform input[type="text"]{flex:2 1 220px}
.addform select{flex:1 1 120px;min-width:0}
.addform button{background:var(--blue);border-color:var(--blue);color:#fff;font-weight:600}
.filterrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.filterrow input[type="search"]{flex:1 1 200px;max-width:280px}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{border-radius:999px;padding:8px 14px;font-size:.9rem}
.chip[aria-pressed="true"]{background:var(--blue-soft);border-color:var(--blue);color:var(--blue);font-weight:600}

/* board */
.board{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:1fr;gap:12px}
.col{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:10px;min-height:120px;display:flex;flex-direction:column;cursor:pointer}
.col.today{border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.col.dragover{background:var(--blue-soft)}
.colhead{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;padding:0 2px}
.colhead .cnt{font-size:.78rem;color:var(--muted)}
.colhead .dname{font-weight:600;font-size:.9rem}
.colhead .dnum{font-size:.75rem;color:var(--muted);margin-left:4px}
.inline-add{margin-top:auto;padding-top:8px}
.inline-add .inline-input{width:100%;min-height:30px;padding:4px 8px;border:1px dashed var(--border);background:transparent;font-size:13px;border-radius:6px;color:var(--fg);outline:none;word-break:break-word;white-space:pre-wrap}
.inline-add .inline-input:empty:not(:focus)::before{content:attr(data-placeholder);color:var(--muted)}
.inline-add .inline-input:focus{border-style:solid;border-color:var(--blue);background:var(--surface)}
.inline-meta { display: none; gap: 4px; margin-top: 6px; }
.inline-add:focus-within .inline-meta { display: flex; }
.inline-meta select { flex: 1; height: 24px; font-size: 11px; border-radius: 4px; background: transparent; color: var(--muted); border: 1px dashed var(--border); outline: none; cursor: pointer; }
.inline-meta select:focus { border-style: solid; border-color: var(--blue); }

/* task card */
.card{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px;margin-bottom:8px;display:flex;gap:8px;align-items:flex-start;box-shadow:var(--shadow)}
.card.hit{box-shadow:0 0 0 2px var(--orange)}
.card.dragging{opacity:.5}
.card .statusbtn{width:32px;height:32px;min-height:32px;padding:0;flex:none;font-size:15px;line-height:1;border-radius:6px;display:flex;align-items:center;justify-content:center}
.card .body{flex:1;min-width:0}
.card .t{font-weight:500;font-size:15px;line-height:1.3;word-wrap:break-word;word-break:break-word;white-space:normal;outline:none;padding:4px;margin:-4px;border:1px dashed transparent;border-radius:4px;transition:all 0.15s ease}
.card .t:hover, .card .t:focus{border-color:var(--border);background:var(--surface2)}
.card.st-done .t,.card.st-dropped .t{text-decoration:line-through;color:var(--muted)}
.card .meta{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.card .tag{font-size:13px;cursor:default}
.card .tagsel, .card .daysel{min-height:24px;height:24px;padding:0 2px;font-size:11px;border-radius:5px;color:var(--muted);background:transparent;border:1px solid transparent;cursor:pointer}
.card .tagsel:hover, .card .daysel:hover{border-color:var(--border)}
.card .daysel{width:56px}
.card .tagsel.areasel{width:36px;text-align:center}
.card .tagsel.quadsel{width:36px;text-align:center}
.card .del{width:28px;height:28px;min-height:28px;padding:0;flex:none;font-size:12px;color:var(--muted);border:none;background:none;border-radius:6px}
.card .del:hover{background:var(--red-soft);color:var(--red)}

/* Sidebar */
.sidebar { position: fixed; top: 0; right: 0; width: 400px; max-width: 100vw; height: 100vh; background: var(--bg); border-left: 1px solid var(--border); box-shadow: -4px 0 24px rgba(0,0,0,0.5); z-index: 100; transform: translateX(100%); transition: transform 0.25s ease; display: flex; flex-direction: column; }
.sidebar.open { transform: translateX(0); }
.sidebar-head { padding: 12px 16px; border-bottom: 1px solid var(--border); display: flex; justify-content: flex-end; }
.sidebar-head button { background: transparent; border: none; font-size: 16px; color: var(--muted); cursor: pointer; }
.sidebar-head button:hover { color: var(--fg); }
.sidebar-body { padding: 20px 16px; flex: 1; overflow-y: auto; }
.sb-title { font-size: 24px; font-weight: 700; outline: none; margin-bottom: 16px; line-height: 1.3; }
.sb-title:empty:before { content: attr(data-placeholder); color: var(--muted); }
.sb-desc { margin-top: 16px; font-size: 15px; min-height: 200px; outline: none; line-height: 1.6; padding-bottom: 32px; word-break: break-word; white-space: pre-wrap; }
.sb-title:empty:before,
.sb-desc:empty:before { content: attr(data-placeholder); color: var(--muted); }
.sb-meta-row { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.sb-meta-row label { flex: 0 0 60px; font-size: 0.85rem; color: var(--muted); }
.sb-meta-row select { flex: 1; height: 32px; min-height: 32px; font-size: 0.85rem; padding: 4px 8px; }

/* Floating Toolbar */
.float-toolbar { position: absolute; z-index: 200; background: #222; border: 1px solid #444; border-radius: 8px; display: none; padding: 4px; gap: 2px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); align-items: center; font-family: sans-serif; }
.float-toolbar.visible { display: flex; }
.float-toolbar button { background: transparent; border: none; color: #fff; width: 28px; height: 28px; border-radius: 4px; cursor: pointer; font-size: 15px; font-weight: 600; font-family: inherit; }
.float-toolbar button:hover { background: #444; }
.float-toolbar .sep { width: 1px; height: 16px; background: #555; margin: 0 4px; }

/* Palette Dropdowns */
.ft-palette { position: relative; }
.ft-palette-menu { position: absolute; top: 100%; left: 0; background: #222; border: 1px solid #444; border-radius: 6px; padding: 6px; display: none; grid-template-columns: repeat(5, 24px); gap: 6px; margin-top: 4px; box-shadow: 0 4px 12px rgba(0,0,0,0.5); z-index: 201; }
.ft-palette:hover .ft-palette-menu { display: grid; }
.ft-palette-menu button { width: 24px; height: 24px; border-radius: 4px; padding: 0; min-height: 24px; border: 1px solid transparent; }
.ft-palette-menu button:hover { border-color: #fff; }
.pal-blue { background: var(--blue) !important; }
.pal-green { background: var(--green) !important; }
.pal-orange { background: var(--orange) !important; }
.pal-red { background: var(--red) !important; }
.pal-purple { background: var(--purple) !important; }
.pal-bg-blue { background: var(--blue-soft) !important; }
.pal-bg-green { background: var(--green-soft) !important; }
.pal-bg-orange { background: var(--orange-soft) !important; }
.pal-bg-red { background: var(--red-soft) !important; }
.pal-bg-purple { background: var(--purple-soft) !important; }

/* status popup */
#statusMenu{position:absolute;z-index:60;background:var(--bg);border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 16px rgba(0,0,0,.15);padding:4px;min-width:170px;display:none}
#statusMenu button{display:flex;align-items:center;gap:8px;width:100%;border:none;background:none;text-align:left;padding:8px 10px;border-radius:6px;min-height:40px;font-size:.9rem}
#statusMenu button:hover{background:var(--surface)}
#statusMenu button.on{background:var(--blue-soft);font-weight:600}

/* matrix */
.matrix{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:12px}
.quad{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--surface);display:flex;flex-direction:column}
.quad h3{display:flex;align-items:center;gap:8px;font-size:1rem}
.quad .hint{font-size:.8rem;color:var(--muted);margin-bottom:10px}
.quad.q-ui h3{color:var(--red)} .quad.q-in h3{color:var(--green)}
.quad.q-un h3{color:var(--orange)} .quad.q-no h3{color:var(--muted)}

/* pdca */
.pdcagrid{display:grid;grid-template-columns:3fr 2fr;grid-template-rows:auto auto;gap:12px;margin-top:14px}
.pd-plando{grid-column:1 / 2;grid-row:1 / 3}
.pd-check{grid-column:2 / 3;grid-row:1 / 2}
.pd-act{grid-column:2 / 3;grid-row:2 / 3}
.pdcard{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface)}
.pdcard h3{display:flex;align-items:center;gap:8px}
.pdcard label{display:block;font-size:.85rem;color:var(--muted);margin:10px 0 4px}
.pdcard input{width:100%}
.daychip{position:relative}
.daychip .dot{color:var(--orange);margin-left:4px}
.daychip.today::after{content:"today";font-size:.65rem;color:var(--blue);margin-left:6px;text-transform:uppercase;font-weight:700}

/* review */
.panelgrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.boxcard{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface);margin-bottom:12px}
.trendrow{display:grid;grid-template-columns:52px 1fr 120px;align-items:center;gap:10px;min-height:32px}
.trendrow .wl{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.trendrow.cur .wl{color:var(--blue);font-weight:700}
.trendbar{height:16px;border-radius:4px;background:var(--surface2);overflow:hidden}
.trendbar>div{height:100%;border-radius:4px}
.tb-g{background:var(--green)} .tb-o{background:var(--orange)} .tb-r{background:var(--red)}
.trendrow .tv{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:6px 8px;border-bottom:1px solid var(--border)}
th{font-size:.78rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted)}
td.num,th.num{text-align:right;font-variant-numeric:tabular-nums}

/* okrs */
.qgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:20px}
.qcard{border:1px solid var(--border);border-radius:12px;padding:12px;background:var(--surface)}
.qcard .ql{font-size:.75rem;font-weight:700;color:var(--blue);text-transform:uppercase;letter-spacing:.06em}
.qcard .qn{font-weight:700;margin:4px 0}
.qcard .qp{font-size:.85rem;color:var(--muted)}
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:20px}
.mcard{border:1px solid var(--border);border-radius:12px;padding:10px;background:var(--surface)}
.mcard.cur{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.mcard .mh{font-weight:600;font-size:.9rem;margin-bottom:6px;display:flex;justify-content:space-between}
.mcard .mh .now{color:var(--orange);font-size:.7rem;text-transform:uppercase;font-weight:700}
.mcard textarea{min-height:64px;font-size:.85rem;background:var(--bg)}
.obj{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface);margin-bottom:12px}
.obj .ohead{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.obj .ohead input{flex:1;font-weight:700;background:transparent;border-color:transparent}
.obj .ohead input:hover{border-color:var(--border);border-style:dashed}
.obj .ohead input:focus{border-color:var(--blue);background:var(--blue-soft)}
.obj .cnt{font-size:.8rem;color:var(--muted);white-space:nowrap}
.kr{display:flex;align-items:flex-start;gap:8px;padding:4px 0}
.kr .krst{width:36px;height:36px;min-height:36px;padding:0;flex:none;font-size:15px;border-radius:6px}
.kr .krt{flex:1;padding:6px 4px;min-height:24px}
.kr .krdel{opacity:0;width:28px;height:28px;min-height:28px;padding:0;border:none;background:none;color:var(--muted);flex:none}
.kr:hover .krdel{opacity:1}
.kr .krdel:hover{color:var(--red)}
.linkbtn{border:none;background:none;color:var(--blue);padding:8px 4px}

/* 5-year */
.callout{border:1px solid var(--orange);background:var(--orange-soft);border-radius:12px;padding:14px 16px;margin-bottom:20px;font-weight:500}
.timeline{position:relative;margin-left:8px}
.stage{position:relative;padding:0 0 24px 56px}
.stage::before{content:"";position:absolute;left:19px;top:40px;bottom:-2px;width:2px;background:var(--border)}
.stage:last-child::before{display:none}
.stage .dot{position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;background:var(--surface);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:18px}
.stagecard{border:1px solid var(--border);border-radius:12px;padding:14px;background:var(--surface)}
.stagecard.cur{border-color:var(--orange);box-shadow:inset 0 0 0 1px var(--orange)}
.stagecard .yr{font-weight:700;font-size:1.05rem}
.stagecard .th{color:var(--blue);font-weight:600;font-size:.9rem;margin-left:8px}
.stagecard .goal{margin:6px 0 10px;font-size:.92rem}
.stagetags{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.stagetag{display:inline-flex;align-items:center;gap:2px;background:var(--blue-soft);border:1px solid transparent;border-radius:999px;padding:2px 6px}
.stagetag input{border:none;background:transparent;min-height:28px;padding:2px 4px;font-size:.8rem;color:var(--blue);font-weight:600;width:110px}
.stagetag button{border:none;background:none;min-height:28px;width:24px;padding:0;color:var(--muted);font-size:11px}
.stagetag button:hover{color:var(--red)}
.addtag{border-radius:999px;min-height:32px;padding:2px 12px;font-size:.85rem}
.stagedel{float:right;border:none;background:none;color:var(--muted);min-height:32px;width:32px;padding:0}
.stagedel:hover{color:var(--red)}

/* modal */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:100;padding:16px}
.overlay[hidden]{display:none}
.modal{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:24px;max-width:420px;width:100%}
.dropzone{border:2px dashed var(--border);border-radius:12px;padding:32px 16px;text-align:center;color:var(--muted);margin:14px 0}
.dropzone.dragover{border-color:var(--blue);background:var(--blue-soft);color:var(--blue)}
.modal .mbtns{display:flex;gap:8px;justify-content:flex-end}

footer{margin-top:32px;padding-top:16px;border-top:1px solid var(--border);color:var(--muted);font-size:.85rem;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

@media (max-width:1000px){
  .board{grid-template-columns:1fr 1fr}
  .qgrid{grid-template-columns:1fr 1fr}
  .mgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .container{padding:16px}
  .board,.matrix,.pdcagrid,.panelgrid,.qgrid,.mgrid,.stats{grid-template-columns:1fr}
  .pd-plando,.pd-check,.pd-act{grid-column:1 / -1;grid-row:auto}
  .titlerow h1{font-size:1.6rem}
}

/* ═══════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════ */

.login-wrapper{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  background:var(--bg);
}

.login-card{
  width:100%;
  max-width:400px;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:16px;
  padding:40px 32px 32px;
  box-shadow:0 8px 32px rgba(0,0,0,.08);
}

.login-card h1{
  font-size:1.6rem;
  font-weight:700;
  text-align:center;
  margin-bottom:4px;
}

.login-card .subtitle{
  text-align:center;
  color:var(--muted);
  font-size:.9rem;
  margin-bottom:28px;
}

.login-card form{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.login-card form button[type="submit"]{
  background:var(--blue);
  border-color:var(--blue);
  color:#fff;
  font-weight:600;
  font-size:1rem;
  border-radius:10px;
  margin-top:4px;
  transition:opacity .15s;
}
.login-card form button[type="submit"]:hover{
  opacity:.9;
  background:var(--blue);
}

.login-card .error-msg{
  color:var(--red);
  font-size:.85rem;
  text-align:center;
  min-height:1.3em;
}

.login-card .demo-hint{
  margin-top:20px;
  padding:12px;
  border-radius:10px;
  background:var(--blue-soft);
  border:1px solid var(--blue);
  font-size:.85rem;
  text-align:center;
  color:var(--blue);
  line-height:1.6;
}

.login-card .demo-hint code{
  background:var(--bg);
  padding:2px 7px;
  border-radius:4px;
  font-weight:700;
  font-size:.9rem;
}

/* ═══════════════════════════════════════════════════════════════
   SYNC BADGE (footer)
   ═══════════════════════════════════════════════════════════════ */

.sync-badge{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:2px 10px;
  border-radius:999px;
  font-size:.78rem;
  font-weight:600;
  border:1px solid var(--border);
  transition:all .25s ease;
}
.sync-saved{color:var(--green);border-color:var(--green)}
.sync-saving,.sync-syncing{color:var(--orange);border-color:var(--orange)}
.sync-offline{color:var(--red);border-color:var(--red)}

/* user badge */
.user-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.85rem;
  color:var(--muted);
}
.user-badge .logout-btn{
  border:none;
  background:none;
  color:var(--red);
  font-size:.8rem;
  min-height:auto;
  padding:2px 6px;
  cursor:pointer;
  text-decoration:underline;
}