:root {
    --bg:          #f3f4f6;
    --fg:          #111827;
    --card-bg:     #ffffff;
    --border:      #e5e7eb;
    --accent:      #3b82f6;
    --accent-soft: #e0f2fe;
    --th-bg:       #e7e7e7;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg:          #0d1117;
        --fg:          #e2e8f0;
        --card-bg:     #161b22;
        --border:      #30363d;
        --accent:      #3b82f6;
        --accent-soft: #1e3a8a;
        --th-bg:       #0d1117;
    }
}
* { box-sizing:border-box; }
html,body { height:100%; }
body {
    margin:0;
    font-family:"Inter",system-ui,sans-serif;
    background:var(--bg);
    color:var(--fg);
    display:flex;
    flex-direction:column;
    align-items:center;
    padding:48px 16px;
    font-family: 'Roboto', sans-serif;
}

h1 {
    font-size:clamp(1.8rem,4vw,2.4rem);
    margin:0 0 24px;
    font-weight:700;
    background:linear-gradient(90deg,var(--accent),#8b5cf6);
    -webkit-background-clip:text;
    color:transparent;
}
.card {
    width:100%;
    max-width:960px;
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:12px;
    padding:32px;
    box-shadow:0 10px 25px rgba(0,0,0,.05);
}
label { font-weight:600; display:block; margin-bottom:6px; }
textarea, select {
    width:100%;
    padding:12px 14px;
    font:14px/1.45 monospace;
    border:1px solid var(--border);
    border-radius:8px;
    background:var(--bg);
    color:var(--fg);
    resize:vertical;
    transition:border .15s;
}
textarea:focus,select:focus { outline:none; border-color:var(--accent); }
table {
    width:100%;
    border-collapse:collapse;
    margin-top:24px;
}
th,td { padding:8px 10px; text-align:left; font-size:13px; }
th {
    font-weight:600;
    background:var(--th-bg);
}
tr:not(:last-child) td { border-bottom:1px solid var(--border); }
tr:hover td { background:rgba(59,130,246,.08); }

td:first-child   { width:120px; }
td:nth-child(2)  { width:70px;  }

input.output {
    width:100%;
    padding:6px 8px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--bg);
    color:var(--fg);
    font:13px/1.35 monospace;
}

button.expand {
    padding:6px 10px;
    font-size:12px;
    border:1px solid var(--border);
    border-radius:6px;
    background:var(--accent);
    color:#fff;
    cursor:pointer;
    width: 100%;
    transition:background .15s;
}
button.expand:hover { background:#2563eb; }
.hidden { display:none; }
.output-area {
    min-height: 90px;
    resize: vertical;
}
.footer {
    margin-top: 30px;
}
.logo {
    position: static;
    margin-bottom: -10px;
    margin-right: 5px;
}
#noteBox {
    position:fixed;
    width:450px; height:300px;
    top:100px; left:calc(50% - 150px);
    background:var(--card-bg);
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 6px 18px rgba(0,0,0,.16);
    z-index:9999;
    display:none;
    user-select:none;
}
#noteBox.show { display:block; }

#noteHeader {
    padding:8px 10px;
    cursor:move;
    background: #cecece;
    font-weight:600;
    display:flex; align-items:center;
    justify-content:space-between;
    border-radius: 5px 5px 0px 0px;
    color: black;
}
#noteHeader button {
    background:none;
    border:none;
    font-size:16px;
    cursor:pointer;
    line-height:1;
}
#noteArea {
    width:100%; height:calc(100% - 34px);
    border:none; padding:8px 10px; resize:none;
    font:13px/1.4 monospace;
    background:transparent;
}